CSS Academy · Lekcja

Kolor i obraz tła

Zastosują Państwo kolory i obrazy tła za pomocą właściwości background-color i background-image.

Lekcja 2 z 413 kroki

Kolor i obraz tła to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

background-color

Właściwość background-color ustawia jednolity kolor za elementem. Przyjmuje dowolną wartość koloru CSS i jest widoczna przez przezroczyste obszary obrazów tła.

<div class="hero">Hero section</div>

background-image

background-image ustawia jeden lub więcej obrazów jako tło elementu. Obrazy są umieszczane nad właściwością background-color.

<div class="banner">Banner (image missing &rarr; fallback color shows)</div>

background-size

background-size kontroluje wymiary obrazu. Najważniejsze wartości:

cover — wypełnia obszar, przycinając obraz w razie potrzeby
contain — dopasowuje cały obraz do obszaru, ale może pozostawić puste miejsca
100% 100% — rozciąga obraz, aby dokładnie wypełnił obszar

<div class="hero"></div>

background-position

background-position określa położenie obrazu. Można użyć słów kluczowych albo wartości procentowych i długości.

<div class="hero"></div>

background-repeat

Domyślnie obrazy są powielane w formie kafelków. Powielanie można kontrolować za pomocą background-repeat:

<div class="hero"></div>
  <div class="pattern"></div>

background-attachment

background-attachment określa, czy obraz przewija się razem ze stroną. Wartość fixed tworzy efekt podobny do paralaksy, a scroll jest wartością domyślną.

<div class="spacer">Scroll down &darr;</div>
  <div class="parallax">Fixed background</div>
  <div class="spacer">Scroll up &uarr;</div>

Wiele teł

CSS obsługuje wiele rozdzielonych przecinkami warstw tła. Pierwsza wymieniona warstwa znajduje się na wierzchu.

<div class="card">Overlay + photo layers</div>

Skrót background

Skrót background łączy wszystkie właściwości tła w jednej deklaracji. W przypadku rozmiaru kolejność ma znaczenie: należy zapisać go po pozycji i oddzielić za pomocą /.

<div class="hero"></div>

Przycinanie i początek tła

background-clip kontroluje miejsce malowania tła względem modelu pudełkowego. background-origin określa punkt odniesienia używany przy pozycjonowaniu.

<div class="card">Clip &amp; Origin</div>

Przycinanie tła do tekstu

Należy użyć background-clip: text wraz z przezroczystym kolorem tekstu, aby przyciąć obraz tła lub gradient do kształtu tekstu.

<h1>Gradient Text</h1>

object-fit dla <img> a background-image

W przypadku tagów <img> należy użyć object-fit: cover i object-position zamiast background-image. Dzięki temu obrazy pozostają w DOM, co wspiera dostępność i SEO.

<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />

Szybkie sprawdzenie

Która wartość background-size wypełnia obszar i przycina obraz zamiast pozostawiać puste miejsca?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Warto używać background-color jako koloru awaryjnego pod obrazami. background-size: cover to podstawowy wybór dla obrazów hero wypełniających cały obszar. Wiele warstw tła zapewnia dużą kontrolę nad kompozycją. Skrót zwięźle łączy wszystkie właściwości tła.

Bezpłatny start

Ucz się CSS dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 40
Lekcje: 159

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Kolor i obraz tła” jest bezpłatna?

Tak — pełny tekst „Kolor i obraz tła” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Kolor i obraz tła”?

Zastosują Państwo kolory i obrazy tła za pomocą właściwości background-color i background-image. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Kolor i obraz tła”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy