background-color
Ustawia kolor tła elementu.
- Wartość domyślna
transparent- Dziedziczona
- Nie
- Animowalna
- tak, jako kolor
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.backgroundColor = "#1e1533"
Przykład
#.alert-success {
background-color: rgb(16 185 129 / 0.12);
border: 1px solid rgb(16 185 129 / 0.4);
color: #6ee7b7;
}<p class="alert-success" style="margin: 0; padding: 10px 14px; border-radius: 10px; background-color: rgb(16 185 129 / 0.12); border: 1px solid rgb(16 185 129 / 0.4); color: #6ee7b7;">Zadanie zaliczone! +20 EXP</p>Definicja i zastosowanie
#Właściwość background-color wypełnia tło elementu kolorem. Tło obejmuje obszar treści i paddingu, a domyślnie także obszar pod obramowaniem (widać to przy obramowaniu przerywanym).
Domyślna wartość to transparent, więc elementy bez tła pokazują tło rodzica. Kolor z kanałem przezroczystości, na przykład rgb(124 58 237 / 0.2), pozwala zabarwić tło, zachowując widoczność tego, co pod spodem.
Kolor tła rysowany jest pod ewentualnym obrazem tła (background-image). Dzięki temu działa jak kolor zapasowy, gdy obraz się nie wczyta.
Składnia
#background-color: <kolor>;Wartości
#- Brak tła, widać tło rodzica.
- Pełny, nieprzezroczysty kolor.
z przezroczystością
Ten sam fiolet z 25% krycia.color-mix()
Mieszanka dwóch kolorów w podanej proporcji.
Wartości w praktyce
#transparent
.demo { background-color: transparent; }#7c3aed
.demo { background-color: #7c3aed; }rgb(124 58 237 / 0.25)
.demo { background-color: rgb(124 58 237 / 0.25); }color-mix(…)
.demo { background-color: color-mix(in oklab, #7c3aed 40%, #0ea5e9); }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Półprzezroczyste tła kolorów statusu (sukces, błąd) wyglądają dobrze zarówno w jasnym, jak i ciemnym motywie.
- Ustaw kolor tła także pod obrazem tła, żeby tekst był czytelny, zanim obraz się wczyta.
Powiązane hasła
#- backgroundSkrót ustawiający wszystkie właściwości tła w jednej deklaracji.
- background-imageUstawia obraz lub gradient jako tło elementu.
- colorUstawia kolor tekstu i domyślny kolor obramowań, dekoracji oraz ikon SVG z currentcolor.
- opacityUstawia przezroczystość całego elementu razem z jego zawartością.
Widzisz błąd albo brakuje przykładu? Napisz do nas.