Tato studijní příručka ukáže, jak používat obrázky na pozadí s CSS. Takže, začněme!
Jak využít více obrázků na pozadí pomocí CSS?
CSS' Pozadí Vlastnost ” je zkrácená vlastnost, která obsahuje vlastnosti pozadí, příloha pozadí, klip, obrázek, opakování, původ, velikost a poloha. Vlastnost pozadí lze použít k určení adres URL více obrázků. Tyto obrázky jsou pak umístěny a nastaveny podle toho.
Vezměme si příklad, kdy jeden prvek div obsahuje pouze jeden obrázek jako logo webové stránky, zatímco druhý obsahuje tři obrázky.
Příklad: Přidání více obrázků na pozadí pomocí CSS
V HTML přidejte prvek div pro logo a zadejte název třídy. Nazvali jsme to např. logo “. Druhý div používá více obrázků, takže jsme ho pojmenovali „ více obrázků “. Můžete však zadat název třídy podle svých preferencí.
HTML
< div třída = 'logo' < / div >< div třída = 'více obrázků' < / div >
V další části upravíme obrázky pomocí vlastnosti CSS background.
Styl „logo“ div
.logo {šířka : 100% ;
výška : 50 pixelů ;
vycpávka : 5px ;
okraj : 5px ;
velikost pozadí : 100 pixelů ;
pozadí-opakování : ne-opakovat ;
obrázek na pozadí : url ( images/linux-logo.png ) ;
}
Element div s třídou ' logo “ se používá s následujícími vlastnostmi:
- “ šířka “ vlastnost se používá k nastavení šířky prvku na “ 100% “.
- “ výška ” vlastnost se používá pro nastavení výšky prvku na “ 50 pixelů “.
- “ vycpávka ” vlastnost se používá pro nastavení “ 5px ” mezera kolem zadaného obsahu prvku.
- “ okraj “ vlastnost se používá pro nastavení “ 5px ” prostor kolem prvku.
- “ velikost pozadí Vlastnost ” nastaví velikost obrázku na pozadí prvku jako “ 100 pixelů “.
- “ pozadí-opakování “ s hodnotou “ ne-opakovat ” zobrazí pozadí pouze jednou.
- “ obrázek na pozadí ” vlastnost se používá k určení adresy URL obrázku.
Divize stylu „více obrázků“.
.více obrázků {šířka : 90 % ;
výška : 45vh ;
okraj : 1px auto ;
vycpávka : 20 pixelů ;
velikost pozadí : 150 pixelů ;
barva pozadí : rgb ( 157 , 154 , 151 ) ;
obrázek na pozadí : url ( images/office.png ) , url ( images/html.png ) , url ( images/laptop.png ) ;
pozadí-opakování : ne-opakovat , ne-opakovat , ne-opakovat ;
pozadí-pozice : vlevo, odjet , centrum , že jo ;
}
Nyní upravte styl druhého kontejneru takto:
- “ barva pozadí ” vlastnost určuje barvu pozadí prvku.
- “ obrázek na pozadí ” určuje více adres URL obrázků.
- “ pozadí-opakování Vlastnost ” nastavuje hodnoty pro obrázky v sekvenci obrázků zadaných ve vlastnosti background-image. Oba obrázky jsou nastaveny jako neopakovatelné, což znamená, že se v prohlížeči zobrazí pouze jednou.
- “ pozadí-pozice ” upravuje pozici obrázku v sekvenci obrázků určené vlastností background-image. První obrázek bude umístěn na levou stranu, druhý na střed a třetí na pravou stranu.
Zadáním výše uvedeného kódu bude výsledek v prohlížeči vypadat takto:
Tímto způsobem můžeme upravit pozici více obrázků pomocí CSS.
Závěr
Aby byla aplikace zábavná a interaktivní, používají vývojáři různé obrázky a barvy. Můžeme nastavit více obrázků s vlastnostmi pozadí CSS, jako je background-position, background-repeat, background-size a další. Tato příručka demonstrovala použití více obrázků na pozadí s příklady CSS.