Kolor tła w CSS: background-color

9.1. Kolor tła (`background-color`)

Strona główna > Kurs CSS > Rozdział 9: Tła i Obramowania > Kolor tła (background-color)

Wprowadzenie: Nadawanie koloru tłu

Jedną z podstawowych technik stylizowania elementów jest nadanie im koloru tła. W CSS służy do tego właściwość background-color.

Pozwala ona określić jednolity kolor, który wypełni całą przestrzeń tła elementu, włączając w to jego wypełnienie (padding), ale nie obejmując marginesów (margin). Tło jest rysowane pod treścią elementu i pod jego obramowaniem (border), jeśli obramowanie nie jest w pełni kryjące.

Wartości `background-color`

Właściwość background-color akceptuje wartości kolorów zdefiniowane w CSS. Możemy używać tych samych metod definiowania kolorów, które poznaliśmy w Rozdziale 4 (Jednostki i Kolory):

Nazwy kolorów: Predefiniowane nazwy jak red, blue, green, lightgray, transparent.
Wartości HEX: Szesnastkowe zapisy kolorów, np. #FF0000 (czerwony), #00FF00 (zielony), #333 (ciemnoszary).
Wartości RGB/RGBA: Definiowanie koloru za pomocą składowych czerwonej, zielonej i niebieskiej (0-255) oraz opcjonalnie kanału alfa (przezroczystości, 0-1), np. rgb(255, 0, 0), rgba(0, 0, 255, 0.5) (półprzezroczysty niebieski).
Wartości HSL/HSLA: Definiowanie koloru za pomocą barwy (hue), nasycenia (saturation) i jasności (lightness) oraz opcjonalnie kanału alfa, np. hsl(120, 100%, 50%) (zielony), hsla(0, 100%, 50%, 0.7) (półprzezroczysty czerwony).
transparent: Specjalna wartość oznaczająca przezroczyste tło. Jest to wartość domyślna dla większości elementów.
currentColor: Używa bieżącej wartości właściwości color (koloru tekstu) elementu jako koloru tła.

<div class="box bg-red">Czerwone tło (nazwa)</div>
<div class="box bg-hex">Niebieskie tło (HEX)</div>
<div class="box bg-rgba">Półprzezroczyste zielone tło (RGBA)</div>
<div class="box bg-hsl">Żółte tło (HSL)</div>
<div class="box bg-transparent">Przezroczyste tło</div>

.box {
  padding: 15px;
  margin-bottom: 10px;
  border: 1px dashed gray;
  color: black; /* Domyślny kolor tekstu */
}

.bg-red {
  background-color: red;
  color: white; /* Zmiana koloru tekstu dla czytelności */
}

.bg-hex {
  background-color: #0000FF; /* Niebieski */
  color: white;
}

.bg-rgba {
  background-color: rgba(0, 255, 0, 0.5); /* Półprzezroczysty zielony */
  /* Tekst pod spodem będzie prześwitywał */
}

.bg-hsl {
  background-color: hsl(60, 100%, 50%); /* Żółty */
}

.bg-transparent {
  background-color: transparent; /* Domyślne, tło będzie takie jak tło rodzica */
}

Obszar pokrycia tła

Domyślnie, background-color wypełnia obszar zawartości (content) oraz wypełnienia (padding) elementu. Można to zmienić za pomocą właściwości background-clip, którą omówimy później w tym rozdziale.

Tło jest rysowane pod obramowaniem (border). Jeśli obramowanie jest częściowo przezroczyste (np. border: 5px dotted red;) lub ma przerwy, kolor tła będzie widoczny pod nim.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Nadaj elementowi <body> jasnoszary kolor tła (np. #f0f0f0), a głównemu kontenerowi strony (np. <div class="container">) biały kolor tła (#ffffff).

Rozwiązanie:

CSS:

body {
  background-color: #f0f0f0; /* Jasnoszare tło całej strony */
  font-family: sans-serif;
  margin: 0;
}

.container { /* Zakładając, że masz taki kontener w HTML */
  width: 90%;
  max-width: 960px;
  margin: 20px auto;
  background-color: #ffffff; /* Białe tło dla treści */
  padding: 20px;
  border: 1px solid #ccc;
}

Efekt: Cała strona będzie miała jasnoszare tło, a główna treść będzie wyróżniona na białym tle wewnątrz kontenera.

Zadanie 2 (do samodzielnego wykonania)

Stwórz trzy elementy div. Pierwszemu nadaj tło za pomocą nazwy koloru, drugiemu za pomocą wartości HEX, a trzeciemu za pomocą RGBA z przezroczystością 0.7.

Zadanie 3 (do samodzielnego wykonania)

Stwórz element button. Nadaj mu ciemnoniebieski kolor tła i biały kolor tekstu. Zobacz, jak background-color wpływa na wygląd przycisku.

FAQ - Najczęściej zadawane pytania

Jaka jest różnica między `background-color` a `background`?

background-color ustawia tylko kolor tła. background jest właściwością zbiorczą (shorthand), która pozwala ustawić wiele właściwości tła jednocześnie (kolor, obrazek, pozycję, powtarzanie itp.) w jednej deklaracji. Jeśli użyjesz background: red;, ustawisz kolor tła na czerwony, ale zresetujesz inne właściwości tła (jak obrazek) do ich wartości domyślnych.

Czy mogę nadać gradient jako `background-color`?

Nie bezpośrednio. Gradienty w CSS są traktowane jako typ obrazu (<gradient>) i ustawia się je za pomocą właściwości background-image (lub zbiorczej background), np. background-image: linear-gradient(red, blue);. Nie można ich przypisać do background-color.

Jak ustawić przezroczyste tło?

Użyj wartości transparent (background-color: transparent;) lub wartości RGBA/HSLA z kanałem alfa ustawionym na 0 (np. background-color: rgba(0, 0, 0, 0);). Spowoduje to, że tło elementu będzie całkowicie przezroczyste, odsłaniając tło elementu nadrzędnego.

Czy `background-color` wpływa na elementy inline?

Tak, background-color działa również na elementach inline (np. <span>, <a>, <strong>). Tło zostanie zastosowane tylko do obszaru zajmowanego przez tekst (lub inną zawartość inline) w każdej linii.

9.1. Kolor tła (background-color)