Táto študijná príručka ukáže, ako používať obrázky na pozadí s CSS. Takže, začnime!
Ako využiť viacero obrázkov na pozadí pomocou CSS?
CSS ' pozadie vlastnosť je skrátená vlastnosť, ktorá obsahuje vlastnosti pozadia, prílohy, klipu, obrázka, opakovania, pôvodu, veľkosti a polohy. Vlastnosť pozadia sa dá použiť na určenie adries URL viacerých obrázkov. Tieto obrázky sa potom umiestnia a nastavia podľa toho.
Zoberme si príklad, v ktorom jeden prvok div obsahuje iba jeden obrázok ako logo webovej stránky, zatiaľ čo druhý obsahuje tri obrázky.
Príklad: Pridanie viacerých obrázkov na pozadí pomocou CSS
V HTML pridajte prvok div pre logo a zadajte názov triedy. Nazvali sme to napríklad „ logo “. Druhý div používa viacero obrázkov, preto sme ho nazvali „ viacnásobné obrázky “. Môžete však zadať názov triedy podľa svojich preferencií.
HTML
< div trieda = 'logo' < / div >< div trieda = 'viac obrázkov' < / div >
V ďalšej časti upravíme obrázky pomocou vlastnosti CSS background.
Štýl „logo“ div
.logo {šírka : 100% ;
výška : 50 pixelov ;
vypchávka : 5 pixelov ;
marža : 5 pixelov ;
veľkosť pozadia : 100 pixelov ;
pozadie-opakovať : bez opakovania ;
obrázok na pozadí : url ( images/linux-logo.png ) ;
}
Prvok div s triedou „ logo “ sa používa s nasledujúcimi vlastnosťami:
- “ šírka 'vlastnosť sa používa na nastavenie šírky prvku na ' 100% “.
- “ výška ” vlastnosť sa používa na nastavenie výšky prvku na “ 50 pixelov “.
- “ vypchávka ” vlastnosť sa používa na nastavenie “ 5 pixelov ” priestor okolo určeného obsahu prvku.
- “ marža ” vlastnosť sa používa na nastavenie “ 5 pixelov ” priestor okolo prvku.
- “ veľkosť pozadia 'vlastnosť nastaví veľkosť obrázka na pozadí prvku ako ' 100 pixelov “.
- “ pozadie-opakovať “ s hodnotou “ bez opakovania ” zobrazí pozadie iba raz.
- “ obrázok na pozadí vlastnosť sa používa na určenie adresy URL obrázka.
Štýl „multiple-images“ div
.viacnásobné obrázky {šírka : 90 % ;
výška : 45vh ;
marža : 1px auto ;
vypchávka : 20 pixelov ;
veľkosť pozadia : 150 pixelov ;
farba pozadia : rgb ( 157 , 154 , 151 ) ;
obrázok na pozadí : url ( images/office.png ) , url ( images/html.png ) , url ( images/laptop.png ) ;
pozadie-opakovať : bez opakovania , bez opakovania , bez opakovania ;
pozícia na pozadí : vľavo , stred , správny ;
}
Teraz upravte štýl druhého kontajnera takto:
- “ farba pozadia vlastnosť určuje farbu pozadia prvku.
- “ obrázok na pozadí vlastnosť určuje viacero adries URL obrázkov.
- “ pozadie-opakovať Vlastnosť ” nastavuje hodnoty pre obrázky v sekvencii obrázkov špecifikovaných vo vlastnosti background-image. Oba obrázky sú nastavené ako neopakovateľné, čo znamená, že sa v prehliadači zobrazia iba raz.
- “ pozícia na pozadí ” upraví polohu obrázka v poradí obrázkov špecifikovaných vlastnosťou background-image. Prvý obrázok bude umiestnený na ľavej strane, druhý v strede a tretí bude umiestnený na pravej strane.
Po poskytnutí vyššie uvedeného kódu bude výsledok v prehliadači vyzerať takto:
Takto vieme upraviť polohu viacerých obrázkov pomocou CSS.
Záver
Aby bola aplikácia zábavná a interaktívna, vývojári používajú rôzne obrázky a farby. Môžeme nastaviť viacero obrázkov s vlastnosťami pozadia CSS, ako napríklad background-position, background-repeat, background-size a ďalšie. Táto príručka demonštrovala použitie viacerých obrázkov na pozadí s príkladmi CSS.