See õppejuhend näitab, kuidas kasutada taustpilte CSS-iga. Niisiis, alustame!
Kuidas kasutada CSS-iga mitut taustapilti?
CSS' taustal ” atribuut on stenogrammi atribuut, mis sisaldab tausta, taustamanuse, klipi, kujutise, korduse, päritolu, suuruse ja asukoha atribuute. Taustaatribuuti saab kasutada mitme pildi URL-ide määramiseks. Seejärel need pildid paigutatakse ja seadistatakse vastavalt.
Võtame näite, kus üks div element sisaldab veebilehe logona ainult ühte pilti, samas kui teine sisaldab kolme pilti.
Näide: mitme taustapildi lisamine CSS-iga
HTML-is lisage logo jaoks element div ja määrake klassi nimi. Näiteks andsime sellele nimeks ' logo ”. Teine osa kasutab mitut pilti, nii et panime sellele nimeks ' mitu pilti ”. Siiski saate määrata klassi nime vastavalt oma eelistustele.
HTML
< div klass = 'logo' >< / div >< div klass = 'mitu pilti' >< / div >
Järgmises jaotises kohandame pilte CSS-i taustaomaduste abil.
Stiilis “logo” jaotus
.logo {laius : 100% ;
kõrgus : 50 pikslit ;
polsterdus : 5 pikslit ;
marginaal : 5 pikslit ;
tausta suurus : 100 pikslit ;
taustakordus : ei-korda ;
taustapilt : url ( images/linux-logo.png ) ;
}
Div element klassiga ' logo ” rakendatakse järgmiste omadustega:
- “ laius ' atribuuti kasutatakse elemendi laiuse määramiseks ' 100% ”.
- “ kõrgus ' atribuuti kasutatakse elemendi kõrguse määramiseks ' 50 pikslit ”.
- “ polsterdus atribuuti kasutatakse ' 5 pikslit ” ruumi elemendi määratud sisu ümber.
- “ marginaal ' atribuuti kasutatakse ' 5 pikslit ” ruumi elemendi ümber.
- “ tausta suurus atribuut ' määrab elemendi taustapildi suuruseks ' 100 pikslit ”.
- “ taustakordus ' väärtusega ' ei-korda ” kuvab tausta ainult üks kord.
- “ taustapilt ” atribuuti kasutatakse pildi URL-i määramiseks.
Stiil 'mitme pildiga' jaotus
.mitme pildiga {laius : 90% ;
kõrgus : 45vh ;
marginaal : 1px auto ;
polsterdus : 20 pikslit ;
tausta suurus : 150 pikslit ;
taustavärv : rgb ( 157 , 154 , 151 ) ;
taustapilt : url ( images/office.png ) , url ( images/html.png ) , url ( images/laptop.png ) ;
taustakordus : ei-korda , ei-korda , ei-korda ;
tausta-positsioon : vasakule , Keskus , õige ;
}
Nüüd kujundage teine konteiner järgmiselt:
- “ taustavärv ” atribuut määrab elemendi tausta värvi.
- “ taustapilt ” atribuut määrab mitu pildi URL-i.
- “ taustakordus ” atribuut määrab piltidele väärtused taustpildi atribuudis määratud piltide jadas. Mõlemad pildid on seatud mittekorduvateks, mis tähendab, et neid kuvatakse brauseris ainult üks kord.
- “ tausta-positsioon ” reguleerib pildi asukohta atribuudi background-image poolt määratud piltide jadas. Esimene pilt asetatakse vasakule, teine keskele ja kolmas paremale küljele.
Kui sisestate ülaltoodud koodi, näeb tulemus brauseris välja järgmine:
Nii saame CSS-iga reguleerida mitme pildi asukohta.
Järeldus
Rakenduse meelelahutuslikuks ja interaktiivseks muutmiseks kasutavad arendajad erinevaid pilte ja värve. Saame määrata mitu pilti CSS-i taustaomadustega, nagu tausta asukoht, tausta kordus, tausta suurus ja palju muud. See juhend on CSS-i näidetega demonstreerinud mitme taustpildi kasutamist.