4.1 Podstawowe zasady
CSS pozwala na użycie kilku obrazów tła w jednym elemencie, co otwiera szerokie możliwości tworzenia złożonych i interesujących efektów wizualnych. Dzięki właściwości background-image i związanym z nią właściwościom, można ustawiać wiele warstw obrazów tła, zarządzając ich kolejnością, pozycją i innymi parametrami.
Składnia
Aby ustawić kilka obrazów tła, używamy składni, w której różne obrazy są oddzielone przecinkami:
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
Właściwości dla ustawienia każdej warstwy
Oprócz background-image, do ustawienia każdej warstwy obrazu tła służą następujące właściwości, które również obsługują wartości wielokrotne oddzielone przecinkami:
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
Kolejność warstw
Obrazy są ułożone warstwowo w kolejności ich wymienienia, gdzie pierwszy obraz jest najbliżej użytkownika, a ostatni najbliżej tła elementu.
4.2 Nakładanie obrazów
Proste nakładanie obrazów.
Przykład użycia:
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
<body>
<div class="multi-bg">Wielopoziomowe tło</div>
</body>
Wyjaśnienie kodu:
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: ustawia dwa obrazy tłabackground-position: center, top left;: centruje pierwszy obraz i ustawia drugi obraz w lewym górnym rogubackground-repeat: no-repeat, no-repeat;: wyłącza powtarzanie dla obu obrazów
4.3 Użycie kilku obrazów
Użycie kilku obrazów tła z różnymi rozmiarami.
Przykład użycia:
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 50% 50%, 30% 30%;
border: 1px solid #000;
}
<body>
<div class="multi-bg-sizes">Wielopoziomowe tło z rozmiarami</div>
</body>
Wyjaśnienie kodu:
background-size: 50% 50%, 30% 30%;: skalowanie pierwszego obrazu do 50% szerokości i wysokości elementu, a drugiego obrazu do 30% szerokości i wysokości elementu
4.4 Przezroczyste obrazy
Nakładanie obrazów z przezroczystością.
Przykład użycia:
.multi-bg-opacity {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, 50%;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<body>
<div class="multi-bg-opacity">Wielopoziomowe tło z przezroczystością</div>
</body>
Wyjaśnienie kodu:
background-size: cover, 50%;: skalowanie pierwszego obrazu aż do pokrycia całego elementu, a drugiego obrazu do 50% rozmiaru elementu::before: pseudoelement dodający półprzezroczystą czarną warstwę nad obrazami tła
4.5 Przycinanie tła
Użycie innych właściwości z kilkoma obrazami tła.
background-origin i background-clip
Te właściwości kontrolują obszar, w którym wyświetlany jest obraz tła, i obszar przycinania tła.
Przykład użycia:
.multi-bg-origin-clip {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-origin: padding-box, content-box;
background-clip: border-box, padding-box;
border: 10px solid #000;
padding: 20px;
}
<body>
<div class="multi-bg-origin-clip">Wielopoziomowe tło z background-origin i background-clip</div>
</body>
Wyjaśnienie kodu:
background-origin: padding-box, content-box;: pierwszy obraz zaczyna się od wewnętrznej krawędzi padding, drugi obraz — od zawartości elementubackground-clip: border-box, padding-box;: pierwszy obraz przycinany jest do zewnętrznej krawędzi ramki, drugi obraz - do wewnętrznej krawędzi padding
GO TO FULL VERSION