Denne studievejledning vil demonstrere, hvordan man bruger baggrundsbilleder med CSS. Så lad os begynde!
Hvordan bruger man flere baggrundsbilleder med CSS?
CSS ' baggrund ”-egenskab er en stenografi-egenskab, der indeholder egenskaber for baggrund, baggrundsvedhæftning, klip, billede, gentagelse, oprindelse, størrelse og position. Baggrundsegenskaben kan bruges til at angive URL'erne for flere billeder. Disse billeder placeres og indstilles derefter.
Lad os tage et eksempel, hvor et div-element kun indeholder ét billede som websidelogo, mens det andet indeholder tre billeder.
Eksempel: Tilføjelse af flere baggrundsbilleder med CSS
Tilføj et div-element til logoet i HTML og angiv klassenavnet. For eksempel kaldte vi det ' logo ”. Den anden div bruger flere billeder, så vi kaldte den ' flere billeder ”. Du kan dog angive klassenavnet efter dine præferencer.
HTML
< div klasse = 'logo' >< / div >< div klasse = 'flere billeder' >< / div >
I næste afsnit vil vi justere billederne ved hjælp af CSS-baggrundsegenskaben.
Stil “logo” div
.logo {bredde : 100 % ;
højde : 50 px ;
polstring : 5 px ;
margen : 5 px ;
baggrundsstørrelse : 100 px ;
baggrund-gentag : ingen gentagelse ;
baggrundsbillede : url ( images/linux-logo.png ) ;
}
div-elementet med klassen ' logo ' anvendes med følgende egenskaber:
- “ bredde ' egenskaben bruges til at indstille elementets bredde til ' 100 % ”.
- “ højde egenskaben ' bruges til at indstille højden af elementet til ' 50 px ”.
- “ polstring ' egenskaben bruges til at indstille ' 5 px ” mellemrum omkring det angivne indhold af elementet.
- “ margen ' egenskaben bruges til at indstille ' 5 px ” rum omkring elementet.
- “ baggrundsstørrelse ' egenskab indstiller elementets baggrundsbilledestørrelse som ' 100 px ”.
- “ baggrund-gentag ' med værdien ' ingen gentagelse ” viser kun baggrunden én gang.
- “ baggrundsbillede egenskaben bruges til at angive billedets URL.
Stil 'flere billeder' div
.multiple-images {bredde : 90 % ;
højde : 45vh ;
margen : 1 px auto ;
polstring : 20 px ;
baggrundsstørrelse : 150 px ;
baggrundsfarve : rgb ( 157 , 154 , 151 ) ;
baggrundsbillede : url ( images/office.png ) , url ( billeder/html.png ) , url ( images/laptop.png ) ;
baggrund-gentag : ingen gentagelse , ingen gentagelse , ingen gentagelse ;
baggrundsposition : venstre , centrum , højre ;
}
Stil nu den anden beholder som følger:
- “ baggrundsfarve ” egenskab angiver farven på elementets baggrund.
- “ baggrundsbillede ” egenskab angiver flere billedwebadresser.
- “ baggrund-gentag egenskaben angiver værdier for billederne i en sekvens af billederne angivet i egenskaben baggrundsbillede. Begge billeder er indstillet til ikke-gentagelse, hvilket betyder, at de kun vises én gang i browseren.
- “ baggrundsposition ” justerer billedpositionen i rækkefølgen af billederne, der er angivet af egenskaben baggrundsbillede. Det første billede vil blive sat på venstre side, det andet i midten og det tredje vil blive placeret på højre side.
Ved at angive den ovenfor angivne kode vil resultatet i browseren se sådan ud:
På denne måde kan vi justere placeringen af flere billeder med CSS.
Konklusion
For at gøre applikationen underholdende og interaktiv bruger udviklere forskellige billeder og farver. Vi kan indstille flere billeder med CSS-baggrundsegenskaber, såsom baggrundsposition, baggrundsgentag, baggrundsstørrelse og mere. Denne manual har demonstreret brugen af flere baggrundsbilleder med CSS-eksempler.