INF.03 · HTML i CSS

Kolory i tła w CSS

Tło pomaga czytać treść.

Przewidź efekt
Zmień i sprawdź
Zbuduj samodzielnie

Po tej lekcji: Dobierzesz kolor i tło oraz odróżnisz przezroczystość tła od przezroczystości całego elementu.

Zrozum, zanim zapiszesz

color ustawia kolor tekstu, background-color tło. Ten sam kolor możesz zapisać nazwą, HEX, rgb() lub hsl(). Kanał alfa dotyczy danego koloru, np. rgb(0 0 0 / 60%). opacity: .6 działa na cały wyrenderowany element wraz z potomkami.

Obraz tła w background-image: url("obrazy/plakat.svg") jest liczony względem pliku CSS. Dobierz background-size: cover, pozycję i brak powtarzania; cover może przyciąć część obrazu. Gradient też jest obrazem tła. Zapewnij awaryjny background-color.

Ważne zdjęcie z opisem powinno być img z alt; dekoracyjne tło nie ma alt. Kontrast tekstu zwykłego powinien wynosić przynajmniej 4,5:1, a dużego 3:1 według WCAG AA. Nie przekazuj błędu wyłącznie czerwonym kolorem. Sprawdź tekst na najjaśniejszym i najciemniejszym miejscu fotografii.

Przygotuj HTML do tego przykładu

Ten fragment wstaw do body dokumentu z lekcji 1. W head dodaj <link rel="stylesheet" href="style.css">. Kolejny blok zapisz w osobnym pliku style.css, obok index.html.

index.html — fragment bodyhtml

<header class="baner"><h1>Kino szkolne</h1><p>Piątek, godzina 16:00</p></header>

Przykład do odtworzenia

style.csscss

/* Ścieżka jest liczona od style.css. */
.baner {
  color: #fff;
  background-color: #102a43;
  background-image: linear-gradient(rgb(0 0 0 / 65%), rgb(0 0 0 / 65%)),
                    url("obrazy/plakat.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 2rem;
}

Ten sam kolor i warstwy tła

Zapis	Znaczenie
`red` / `#ff0000` / `rgb(255 0 0)` / `hsl(0 100% 50%)`	Ten sam nieprzezroczysty czerwony
`rgb(0 0 0 / 50%)` / `rgba(0,0,0,.5)`	Czarny kolor z alfą 0.5
`background-size: contain`	Cały obraz; możliwe wolne pasy
`background-size: cover`	Wypełnienie z możliwym przycięciem
`linear-gradient(#102a43, #21644a)`	Płynne przejście kolorów
`background-repeat: no-repeat`	Bez powielania obrazu

Sprawdź w działaniu

Color Studio — znajdź barwę i sprawdź alfę

Wybierz kolor z próbnika, wpisz HEX albo zmień kanały RGB. Rozwiń HSL, aby ustawić odcień, nasycenie i jasność. Wszystkie zapisy opisują tę samą barwę. Suwak alfa porównuje dwa różne zastosowania przezroczystości na tym samym zdjęciu Spocka.

Alfa koloru tła pozostawia zdjęcie i litery nieprzezroczyste. Opacity na rodzicu zmniejsza krycie całego elementu, także jego zawartości. W HEX z alfą ostatnie dwie cyfry odpowiadają kryciu.

Jak odczytać te same barwy?

HEX zapisuje trzy kanały w systemie szesnastkowym: #38bdf8 to RGB 56, 189, 248. Zapis rgba(56, 189, 248, 0.65) dodaje alfę. Tę samą rolę pełni nowoczesne rgb(56 189 248 / 0.65).

W HSL odcień H to kąt 0–360°, S to nasycenie, a L jasność. hsla() dodaje alfę. HEX z alfą ma osiem cyfr: ostatnia para jest zaokrągloną wartością od 00 (0% krycia) do ff (100%). Dlatego po przeliczeniu krycie może minimalnie różnić się od zapisu dziesiętnego.

Spróbuj: ustaw czystą czerwień, potem biel i czerń. Porównaj wszystkie zapisy. Następnie wybierz dowolną barwę i ustaw alfę na 0, 0.5 oraz 1. Wyjaśnij, dlaczego po prawej stronie znikają również litery.

Obraz do ćwiczeń

Pobierz autorską ilustrację „Plakat koła filmowego” przyciskiem w warsztacie. Utwórz folder obrazy obok index.html i zapisz w nim plakat.svg. Arkusz style.css trzymaj obok index.html. Ten sam plik posłuży w kolejnych lekcjach. Ilustracja jest materiałem własnym BitEdu do ćwiczeń.

Ćwiczenie z pomocą · samodzielna praca

Zbuduj samodzielnie — z pomocą, gdy potrzebujesz

Zbuduj baner z tłem obrazkowym, awaryjnym kolorem i białym nagłówkiem. Dodaj ciemny gradient jako pierwszą warstwę background-image. Porównaj czytelność z gradientem i bez niego. Nie zmniejszaj opacity całego banera.

Oczekiwany rezultat

Tekst pozostaje nieprzezroczysty, obraz stanowi tło, a po wyłączeniu obrazu baner wciąż ma czytelny kolor.

Potrzebujesz pomocy? Rozwiązuj krok po kroku.

Krok 1 — pokaż podpowiedź

W background-image zapisz najpierw linear-gradient, potem url.

Krok 2 — pokaż podpowiedź

Dla tła ustaw center / cover i no-repeat.

Krok 3 — pokaż podpowiedź

W narzędziach przeglądarki wyłącz background-image i sprawdź kolor awaryjny.

Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.

Sprawdź, zanim oddasz

Otwórz plik w przeglądarce i sprawdź, czy kod daje przewidywany wynik. Użyj narzędzi przeglądarki: Elements pokazuje elementy, Styles dopasowane reguły, a Network brakujące zasoby. Sprawdź kod w Nu HTML Checker; przy fragmentach wklej je do pełnego dokumentu z lang, charset, title i body. Komunikaty walidatora nie zastępują próby klawiaturą i kontroli czytelności.

Podsumowanie

Co warto zapamiętać

Dobierzesz kolor i tło oraz odróżnisz przezroczystość tła od przezroczystości całego elementu.
Potrafisz wskazać w kodzie przyczynę widocznego efektu.
Przed oddaniem sprawdzasz wynik w przeglądarce, nie tylko zapis pliku.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →

Źródła i dalsza nauka