Ovaj vodič za učenje će pokazati kako koristiti pozadinske slike sa CSS-om. Dakle, počnimo!
Kako koristiti više pozadinskih slika s CSS-om?
CSS ' pozadina ” svojstvo je skraćeno svojstvo koje sadrži svojstva pozadine, pozadinskog privitka, isječka, slike, ponavljanja, porijekla, veličine i položaja. Svojstvo pozadine može se koristiti za određivanje URL-ova više slika. Te se slike zatim pozicioniraju i postavljaju u skladu s tim.
Uzmimo primjer u kojem jedan div element sadrži samo jednu sliku kao logo web stranice, dok drugi sadrži tri slike.
Primjer: Dodavanje više pozadinskih slika pomoću CSS-a
U HTML-u dodajte element div za logotip i navedite naziv klase. Na primjer, nazvali smo ga ' logo ”. Drugi div koristi više slika, pa smo ga nazvali ' više slika ”. Međutim, možete navesti naziv klase prema svojim željama.
HTML
< div razreda = 'logo' >< / div >< div razreda = 'više slika' >< / div >
U sljedećem ćemo odjeljku prilagoditi slike koristeći CSS svojstvo pozadine.
Stil 'logo' div
.logo {širina : 100% ;
visina : 50 px ;
podstava : 5 px ;
margina : 5 px ;
veličina pozadine : 100 px ;
pozadinsko ponavljanje : nema-ponoviti ;
pozadinska slika : url ( slike/linux-logo.png ) ;
}
Element div s klasom ' logo ” primjenjuje se sa sljedećim svojstvima:
- “ širina ” svojstvo se koristi za postavljanje širine elementa na “ 100% ”.
- “ visina ” svojstvo se koristi za postavljanje visine elementa na “ 50 px ”.
- “ podstava ” svojstvo se koristi za postavljanje “ 5 px ” razmak oko navedenog sadržaja elementa.
- “ margina ” svojstvo se koristi za postavljanje „ 5 px ” prostor oko elementa.
- “ veličina pozadine ” svojstvo postavlja veličinu pozadinske slike elementa kao “ 100 px ”.
- “ pozadinsko ponavljanje ' sa vrijednošću ' nema-ponoviti ” prikazuje pozadinu samo jednom.
- “ pozadinska slika ” Svojstvo se koristi za određivanje URL-a slike.
Stil “više slika” div
.više slika {širina : 90% ;
visina : 45vh ;
margina : 1px auto ;
podstava : 20 px ;
veličina pozadine : 150 px ;
boja pozadine : rgb ( 157 , 154 , 151 ) ;
pozadinska slika : url ( slike/ured.png ) , url ( slike/html.png ) , url ( slike/laptop.png ) ;
pozadinsko ponavljanje : nema-ponoviti , nema-ponoviti , nema-ponoviti ;
pozadina-položaj : lijevo , centar , pravo ;
}
Sada stilizirajte drugi spremnik na sljedeći način:
- “ boja pozadine ” Svojstvo određuje boju pozadine elementa.
- “ pozadinska slika ” svojstvo navodi URL-ove više slika.
- “ pozadinsko ponavljanje ” svojstvo postavlja vrijednosti za slike u nizu slika navedenih u svojstvu background-image. Obje su slike postavljene kao one koje se ne ponavljaju, što znači da će se u pregledniku prikazati samo jednom.
- “ pozadina-položaj ” prilagođava položaj slike u nizu slika specificiranih svojstvom background-image. Prva slika bit će postavljena s lijeve strane, druga u sredini, a treća s desne strane.
Unosom gore navedenog koda, rezultat u pregledniku izgledat će ovako:
Na taj način možemo prilagoditi položaj više slika pomoću CSS-a.
Zaključak
Kako bi aplikacija bila zabavna i interaktivna, programeri koriste različite slike i boje. Možemo postaviti više slika s CSS svojstvima pozadine, kao što su položaj pozadine, ponavljanje pozadine, veličina pozadine itd. Ovaj priručnik je pokazao korištenje više pozadinskih slika s CSS primjerima.