Jak używać wielu obrazów tła z CSS

Opracowując dowolną aplikację, programista musi utrzymać interaktywność aplikacji. Istnieje kilka funkcji, które mogą pomóc w przyciągnięciu uwagi użytkownika, takich jak kolory, obrazy, gify i inne. Aby dodać obraz do strony internetowej, html „”Tag można wykorzystać. Podczas gdy dodać wiele obrazów z CSS, „zdjęcie w tle„Własność jest używana z adresami URL obrazów.

Ten przewodnik po studiach pokaże, jak korzystać z obrazów w tle z CSS. Więc zacznijmy!

Jak korzystać z wielu obrazów tła z CSS?

CSS „tło„Właściwość jest właściwością skrótów, która zawiera tło, przywiązanie do tła, klip, obraz, powtórzenie, pochodzenie, rozmiar i pozycja. Właściwość tła może być używana do określania adresów URL wielu obrazów. Te obrazy są następnie ustawiane i ustawiane odpowiednio.

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: Dodanie wielu obrazów tła z 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". Jednak możesz określić nazwę klasy zgodnie z Twoimi preferencjami.

Html

W następnej sekcji dostosujemy obrazy za pomocą właściwości tła CSS.

Styl „logo” div

.logo
szerokość: 100%;
Wysokość: 50px;
Wyściółka: 5px;
Margines: 5px;
Rozmiar tła: 100px;
Powtórzenie tła: bez powtórzenia;
Image tła: URL (obrazy/Linux-Logo.png);

Element div z klasą „logo”Jest stosowany z następującymi właściwościami:

• "szerokość„Własność jest wykorzystywana do ustawiania szerokości elementu na„100%".
• "wysokość„Właściwość służy do ustawiania wysokości elementu na„50px".
• "wyściółka„Własność służy do ustawiania„5px„Space wokół określonej zawartości elementu.
• "margines„Nieruchomość jest wykorzystywana do ustawiania„5px„Przestrzeń wokół elementu.
• "Rozmiar tła„Właściwość ustawia rozmiar obrazu tła elementu jako„100px".
• "powtarzanie tła”Z wartością„bez powtórki”Wyświetla tło tylko raz.
• "zdjęcie w tle„Właściwość jest używana do określenia adresu URL obrazu.

Styl „wielokrotne” div

.Wiele wizji
Szerokość: 90%;
Wysokość: 45 VH;
Margines: 1px Auto;
Wyściółka: 20px;
Rozmiar tła: 150px;
kolor tła: RGB (157, 154, 151);
Image tła: URL (obrazy/biuro.PNG), URL (obrazy/html.PNG), URL (obrazy/laptop.png);
Powtórzenie tła: bez powtórzenia, bez powtórzenia, bez powtórzenia;
Pozycja tła: lewy, środek, po prawej;

Teraz stygnij drugi pojemnik w następujący sposób:

• "kolor tła„Właściwość określa kolor tła elementu.
• "zdjęcie w tle„Właściwość określa wiele adresów URL obrazów.
• "powtarzanie tła„Właściwość ustawia wartości dla obrazów w sekwencji obrazów określonych w właściwości obrazu tła. Oba obrazy są ustawione jako nie powtórne oznacza, że ​​pokażą się w przeglądarce tylko raz.
• "pozycja w tle”Dostosowuje pozycję obrazu w sekwencji obrazów określonych przez właściwość obrazu tła. Pierwszy obraz zostanie ustawiony po lewej stronie, drugi w środku, a trzeci zostanie umieszczony po prawej stronie.

Zapewniając powyższy kod, wynik w przeglądarce będzie wyglądał tak:

W ten sposób możemy dostosować pozycję 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 pozycja tła, powtarzanie tła, rozmiar tła i więcej. Ten podręcznik wykazał użycie wielu obrazów tła z przykładami CSS.