Ez a tanulmányi útmutató bemutatja, hogyan használhatja a háttérképeket CSS-sel. Szóval, kezdjük!
Hogyan lehet több háttérképet használni CSS-sel?
A CSS' háttér ” tulajdonság egy rövidített tulajdonság, amely háttér, háttér-csatolás, klip, kép, ismétlés, eredet, méret és pozíció tulajdonságokat tartalmaz. A háttér tulajdonság több kép URL-címének megadására használható. A képeket ezután a rendszer ennek megfelelően pozícionálja és beállítja.
Vegyünk egy példát, amelyben az egyik div elem csak egy képet tartalmaz a weboldal logójaként, míg a második három képet tartalmaz.
Példa: Több háttérkép hozzáadása CSS-sel
A HTML-ben adjon hozzá egy div elemet az emblémához, és adja meg az osztály nevét. Például elneveztük „ logó ”. A második div több képet használ, ezért elneveztük ' több kép ”. Az osztály nevét azonban saját preferenciái szerint megadhatja.
HTML
< div osztály = 'logó' >< / div >< div osztály = 'több kép' >< / div >
A következő részben a képeket a CSS háttértulajdonságával állítjuk be.
Stílus „logó” div
.logo {szélesség : 100% ;
magasság : 50 képpont ;
párnázás : 5 képpont ;
árrés : 5 képpont ;
háttér méretű : 100 képpont ;
háttér-ismétlés : nem-ismétlés ;
háttérkép : url ( images/linux-logo.png ) ;
}
A div elem a ' osztályú logó ” alkalmazás a következő tulajdonságokkal rendelkezik:
- ' szélesség ' tulajdonságot használják az elem szélességének '' értékre állításához 100% ”.
- ' magasság ' tulajdonság az elem magasságának beállítására szolgál ' 50 képpont ”.
- ' párnázás ' tulajdonság a ' 5 képpont ” térközt az elem meghatározott tartalma körül.
- ' árrés ' tulajdonságot használják a ' 5 képpont ” helyet az elem körül.
- ' háttér méretű ' tulajdonság az elem háttérképének méretét a következőre állítja be 100 képpont ”.
- ' háttér-ismétlés ' értékkel ' nem-ismétlés ” csak egyszer jeleníti meg a hátteret.
- ' háttérkép ” tulajdonság a kép URL-jének megadására szolgál.
Stílus „több kép” div
.multiple-images {szélesség : 90% ;
magasság : 45vh ;
árrés : 1 képpont auto ;
párnázás : 20 képpont ;
háttér méretű : 150 képpont ;
háttérszín : rgb ( 157 , 154 , 151 ) ;
háttérkép : url ( images/office.png ) , url ( images/html.png ) , url ( images/laptop.png ) ;
háttér-ismétlés : nem-ismétlés , nem-ismétlés , nem-ismétlés ;
háttér-pozíció : bal , központ , jobb ;
}
Most alakítsa ki a másik tárolót a következőképpen:
- ' háttérszín ” tulajdonság határozza meg az elem hátterének színét.
- ' háttérkép ” tulajdonság több kép URL-jét ad meg.
- ' háttér-ismétlés ” tulajdonság értékeket állít be a képekhez a background-image tulajdonságban megadott képek sorozatában. Mindkét kép nem ismétlődőnek van beállítva, ami azt jelenti, hogy csak egyszer jelennek meg a böngészőben.
- ' háttér-pozíció ” beállítja a kép pozícióját a background-image tulajdonság által meghatározott képek sorrendjében. Az első kép a bal oldalon, a második középen, a harmadik pedig a jobb oldalon lesz elhelyezve.
A fent megadott kód megadásával az eredmény a böngészőben így fog kinézni:
Így több kép pozícióját is beállíthatjuk CSS-sel.
Következtetés
Annak érdekében, hogy az alkalmazás szórakoztató és interaktív legyen, a fejlesztők különböző képeket és színeket használnak. Több képet is beállíthatunk CSS-háttértulajdonságokkal, mint például háttérpozíció, háttérismétlés, háttérméret stb. Ez a kézikönyv CSS-példákkal szemlélteti több háttérkép használatát.