Tło CSS

Atrybuty tła CSS służą do definiowania efektów tła elementu.

W tych rozdziałach nauczysz się takich atrybutów tła CSS:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color Atrybut określa kolor tła elementu.

Przykład

Ustawienie koloru tła strony wygląda tak:

body {
  background-color: jasnoniebieski;
}

Spróbuj sam

Przez CSS, kolory są zazwyczaj określone w następujący sposób:

  • Dobrze znane nazwy kolorów - na przykład "red"
  • Wartości szesnastkowe - na przykład "#ff0000"
  • Wartości RGB - na przykład "rgb(255,0,0)"

Zobacz Wartości kolorów CSSuzyskać pełną listę możliwych wartości kolorów.

Inne elementy

Możesz ustawić kolor tła dla każdego elementu HTML:

Przykład

W tym miejscu elementy <h1>, <p> i <div> będą miały różne kolory tła:

h1 {
  background-color: green;
}
div {
  background-color: jasnoniebieski;
}
p {
  background-color: yellow;
}

Spróbuj sam

Przezroczystość / Stopień przezroczystości

Atrybut przezroczystości określa przezroczystość/stopień przezroczystości elementu. Wartości sięgają od 0.0 do 1.0. Im niższa wartość, tym większa przezroczystość:

przezroczystość 1
przezroczystość 0.6
przezroczystość 0.3
przezroczystość 0.1

Przykład

div {
  background-color: green;
  przezroczystość: 0.3;
}

Spróbuj sam

Uwaga:Użyj przezroczystość Kiedy ustawiasz przezroczystość dla tła elementu, wszystkie jego pod-elementy dziedziczą tą samą przezroczystość. Może to utrudniać czytanie tekstu w elementach całkowicie przezroczystych.

Przezroczystość RGBA

Jeśli nie chcesz zastosować przezroczystości dla pod-elementów, na przykład w powyższym przykładzie, użyj: RGBA Wartość koloru. Poniższe przykłady ustawiają kolor tła zamiast przezroczystości tekstu:

100% przezroczystość
60% przezroczystość
30% przezroczystości
10% przezroczystości

Znalazłeś w naszej Kolory CSS W rozdziale nauczyłeś się, jak używać RGB jako wartości kolorów. Poza RGB, można również używać wartości kolorów RGB z alpha kanały razem używane (RGBA) - kanał określa przezroczystość koloru.

Wartości kolorów RGBA określone są jako: rgba(red, green, blue, alpha)。alpha Parametry to liczby między 0.0 (całkowicie przezroczyste) a 1.0 (całkowicie nieprzejrzyste).

Wskazówka:Możesz znaleźć więcej informacji o kolorach RGBA w naszej Kolory CSS W rozdziale tym dowiesz się więcej o kolorach RGBA.

Przykład

div {
  background: rgba(0, 128, 0, 0.3) /* Zielony tło z 30% przezroczystości */
}

Spróbuj sam