Tła CSS
Właściwości tła CSS służą do dodawania efektów tła dla elementów.
W tych rozdziałach poznasz następujące właściwości tła CSS:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(właściwość skrótowa)
CSS-kolor tła
Właściwość background-colorokreśla kolor tła elementu.
Przykład
Kolor tła strony ustawia się w następujący sposób:
body {
background-color: lightblue;
}
W CSS kolor jest najczęściej określany przez:
- poprawna nazwa koloru - np. "czerwony"
- wartość szesnastkowa - np. „#ff0000”
- wartość RGB - jak "rgb(255,0,0)"
Spójrz na wartości kolorów CSS , aby uzyskać pełną listę możliwych wartości kolorów.
Inne elementy
Możesz ustawić kolor tła dla dowolnych elementów HTML:
Przykład
Tutaj elementy <h1>, <p> i <div> będą miały różne kolory tła:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
Krycie / Przejrzystość
Właściwość opacityokreśla krycie/przezroczystość elementu. Może przyjąć wartość od 0,0 do 1,0. Im niższa wartość, tym bardziej przejrzysta:
krycie 1
krycie 0,6
krycie 0,3
krycie 0,1
Przykład
div {
background-color: green;
opacity: 0.3;
}
Uwaga: Podczas używania opacitywłaściwości w celu dodania przezroczystości do tła elementu, wszystkie jego elementy podrzędne dziedziczą tę samą przezroczystość. Może to sprawić, że tekst wewnątrz całkowicie przezroczystego elementu będzie trudny do odczytania.
Przejrzystość przy użyciu RGBA
Jeśli nie chcesz stosować krycia do elementów podrzędnych, jak w powyższym przykładzie, użyj wartości kolorów RGBA . Poniższy przykład ustawia krycie koloru tła, a nie tekstu:
100% krycia
60% krycia
30% krycia
10% krycia
Nauczyłeś się z naszego rozdziału CSS Colors , że możesz używać RGB jako wartości koloru. Oprócz RGB możesz użyć wartości koloru RGB z kanałem alfa (RGB A ) - który określa krycie koloru.
Wartość koloru RGBA jest określona za pomocą: rgba(red, green, blue, alpha ). Parametr alfa to liczba z zakresu od 0,0 (w pełni przezroczysta) do 1,0 (w pełni nieprzezroczysta).
Wskazówka: Więcej informacji na temat kolorów RGBA znajdziesz w naszym rozdziale dotyczącym kolorów CSS .
Przykład
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}