Tło - CSS-Tricks | Almanach CSS 2025

backgroundNieruchomość w CSS pozwala kontrolować każdy element tła (co farby pod zawartość tego elementu). Jest to skrócona właściwość, co oznacza, że umożliwia zapisanie wielu właściwości CSS w jednej. Lubię to:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background składa się z ośmiu innych właściwości:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Możesz użyć dowolnej kombinacji tych właściwości, w prawie dowolnej kolejności (chociaż kolejność zalecana w specyfikacji jest powyżej). Jest jednak pewna pułapka: wszystko, czego nie określisz we backgroundwłaściwości, jest automatycznie ustawiane na domyślne. Więc jeśli zrobisz coś takiego:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Tło będzie przezroczyste, a nie czerwone. Rozwiązanie jest jednak łatwe: po prostu zdefiniuj background-colorpo backgroundlub po prostu użyj skrótu (np. background: url(… ) red;)

Wiele środowisk

CSS3 dodał obsługę wielu teł, które nakładają się na siebie. Każda właściwość związana z tłami może mieć listę oddzieloną przecinkami, na przykład:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Każda wartość na liście oddzielonej przecinkami odpowiada warstwie: pierwsza wartość to górna warstwa, druga wartość to druga warstwa, a kolor tła jest zawsze ostatnią warstwą.

Przepisy

Zobacz Pen emBzRd autorstwa Timothy'ego Millera (@tjacobdesign) na CodePen.

Wsparcie przeglądarki

Obsługa różni się w zależności od konkretnych właściwości, a każdy artykuł w Almanachu zawiera unikalne uwagi dotyczące obsługi przeglądarki. Podstawowe jednokolorowe tła i pojedyncze obrazy działają jednak wszędzie, a wszystko, co nie jest obsługiwane, po prostu wraca do następnej najlepszej rzeczy, niezależnie od tego, czy jest to obraz, czy kolor.