Ten przewodnik do nauki pokaże, jak używać obrazów tła z CSS. Więc zaczynajmy!
Jak wykorzystać wiele obrazów tła za pomocą CSS?
CSS” tło ” to skrócona właściwość zawierająca właściwości tła, załącznika tła, klipu, obrazu, powtórzenia, pochodzenia, rozmiaru i położenia. Właściwość tła może służyć do określania adresów URL wielu obrazów. Obrazy te są następnie odpowiednio ustawiane i ustawiane.
Weźmy przykład, w którym jeden element div zawiera tylko jeden obraz jako logo strony internetowej, podczas gdy drugi zawiera trzy obrazy.
Przykład: Dodawanie wielu obrazów tła za pomocą CSS
W HTML dodaj element div dla logo i określ nazwę klasy. Na przykład nazwaliśmy to „ logo ”. Drugi div używa wielu obrazów, więc nazwaliśmy go „ wiele obrazów ”. Możesz jednak określić nazwę klasy zgodnie ze swoimi preferencjami.
HTML
< dz klasa = 'logo' >< / dz >< dz klasa = „wiele obrazów” >< / dz >
W następnej sekcji dostosujemy obrazy za pomocą właściwości tła CSS.
Styl div „logo”.
.logo {szerokość : 100% ;
wysokość : 50px ;
wyściółka : 5 piks ;
margines : 5 piks ;
rozmiar tła : 100 pikseli ;
powtarzanie tła : bez powtórzeń ;
zdjęcie w tle : adres URL ( images/linux-logo.png ) ;
}
Element div z klasą „ logo ” jest stosowany z następującymi właściwościami:
- “ szerokość ” służy do ustawiania szerokości elementu na „ 100% ”.
- “ wysokość ” służy do ustawiania wysokości elementu na „ 50px ”.
- “ wyściółka ” służy do ustawiania „ 5 piks ” przestrzeń wokół określonej zawartości elementu.
- “ margines ” służy do ustawiania „ 5 piks ” przestrzeń wokół elementu.
- “ rozmiar tła ” ustawia rozmiar obrazu tła elementu jako „ 100 pikseli ”.
- “ powtarzanie tła ” o wartości „ bez powtórzeń ” wyświetla tło tylko raz.
- “ zdjęcie w tle ” służy do określania adresu URL obrazu.
Styl div „wiele obrazów”.
.wiele obrazów {szerokość : 90% ;
wysokość : 45vh ;
margines : 1 piks automatyczny ;
wyściółka : 20px ;
rozmiar tła : 150 pikseli ;
kolor tła : rgb ( 157 , 154 , 151 ) ;
zdjęcie w tle : adres URL ( obrazy/biuro.png ) , adres URL ( obrazy/html.png ) , adres URL ( obrazy/laptop.png ) ;
powtarzanie tła : bez powtórzeń , bez powtórzeń , bez powtórzeń ;
pozycja w tle : lewy , Centrum , Prawidłowy ;
}
Teraz stylizuj drugi kontener w następujący sposób:
- “ kolor tła ” określa kolor tła elementu.
- “ zdjęcie w tle ” określa wiele adresów URL obrazów.
- “ powtarzanie tła ” ustawia wartości dla obrazów w sekwencji obrazów określonych we właściwości background-image. Oba obrazy są ustawione jako niepowtarzalne, co oznacza, że będą wyświetlane w przeglądarce tylko raz.
- “ pozycja w tle ” dostosowuje pozycję obrazu w sekwencji obrazów określonej przez właściwość obrazu tła. Pierwszy obraz zostanie ustawiony po lewej stronie, drugi pośrodku, a trzeci po prawej stronie.
Podając powyższy kod, wynik w przeglądarce będzie wyglądał następująco:
W ten sposób możemy dostosować położenie wielu obrazów za pomocą CSS.
Wniosek
Aby aplikacja była zabawna i interaktywna, programiści używają różnych obrazów i kolorów. Możemy ustawić wiele obrazów z właściwościami tła CSS, takimi jak położenie tła, powtórzenie tła, rozmiar tła i inne. W tym podręczniku zademonstrowano użycie wielu obrazów tła z przykładami CSS.