Šis studijų vadovas parodys, kaip naudoti fono paveikslėlius su CSS. Taigi, pradėkime!
Kaip naudoti kelis foninius vaizdus naudojant CSS?
CSS“ fone ypatybė yra sutrumpinta ypatybė, kurią sudaro fono, fono priedo, klipo, vaizdo, pakartojimo, kilmės, dydžio ir padėties ypatybės. Fono ypatybę galima naudoti norint nurodyti kelių vaizdų URL. Tada tie vaizdai išdėstomi ir atitinkamai nustatomi.
Paimkime pavyzdį, kuriame viename div elemente yra tik vienas vaizdas kaip tinklalapio logotipas, o antrame - trys vaizdai.
Pavyzdys: kelių fono vaizdų pridėjimas naudojant CSS
HTML pridėkite logotipo elementą div ir nurodykite klasės pavadinimą. Pavyzdžiui, mes jį pavadinome „ logotipas “. Antrajame skyrelyje naudojami keli vaizdai, todėl mes jį pavadinome „ kelių vaizdų “. Tačiau galite nurodyti klasės pavadinimą pagal savo pageidavimus.
HTML
< div klasė = 'logotipas' >< / div >< div klasė = 'keli vaizdai' >< / div >
Kitame skyriuje mes pakoreguosime vaizdus naudodami CSS fono ypatybę.
Stilius „logotipas“ skyr
.logotipas {plotis : 100 % ;
aukščio : 50 piks ;
kamšalas : 5 piks ;
marža : 5 piks ;
fono dydžio : 100 piks ;
fono kartojimas : nekartoti ;
fono vaizdas : url ( images/linux-logo.png ) ;
}
Div elementas su klase ' logotipas “ yra taikomas su šiomis savybėmis:
- “ plotis ypatybė yra naudojama nustatant elemento plotį į ' 100 % “.
- “ aukščio ypatybė yra naudojama norint nustatyti elemento aukštį į „ 50 piks “.
- “ kamšalas ypatybė yra naudojama nustatant 5 piks “ erdvė aplink nurodytą elemento turinį.
- “ marža ypatybė naudojama nustatant 5 piks “ erdvė aplink elementą.
- “ fono dydžio ' ypatybė nustato elemento fono vaizdo dydį kaip ' 100 piks “.
- “ fono kartojimas 'su reikšme ' nekartoti “ rodomas fonas tik vieną kartą.
- “ fono vaizdas “ ypatybė naudojama norint nurodyti vaizdo URL.
Stilius „kelių vaizdų“ skyr
.keli vaizdai {plotis : 90 % ;
aukščio : 45vh ;
marža : 1px automatinis ;
kamšalas : 20 piks ;
fono dydžio : 150 piks ;
fono spalva : rgb ( 157 , 154 , 151 ) ;
fono vaizdas : url ( images/office.png ) , url ( images/html.png ) , url ( images/laptop.png ) ;
fono kartojimas : nekartoti , nekartoti , nekartoti ;
fono padėtis : paliko , centras , teisingai ;
}
Dabar sukurkite kito konteinerio stilių taip:
- “ fono spalva “ ypatybė nurodo elemento fono spalvą.
- “ fono vaizdas “ ypatybė nurodo kelis vaizdo URL adresus.
- “ fono kartojimas ” ypatybė nustato vaizdų reikšmes vaizdų sekoje, nurodytoje fono vaizdo ypatybėje. Abu vaizdai nustatyti kaip nesikartojantys, tai reiškia, kad jie naršyklėje bus rodomi tik vieną kartą.
- “ fono padėtis “ koreguoja vaizdo padėtį vaizdų sekoje, nurodytoje fono vaizdo ypatybėje. Pirmasis vaizdas bus nustatytas kairėje pusėje, antrasis - centre, o trečiasis - dešinėje.
Pateikus aukščiau pateiktą kodą, rezultatas naršyklėje atrodys taip:
Tokiu būdu galime reguliuoti kelių vaizdų padėtį naudodami CSS.
Išvada
Kad programa būtų linksma ir interaktyvi, kūrėjai naudoja skirtingus vaizdus ir spalvas. Galime nustatyti kelis vaizdus su CSS fono ypatybėmis, tokiomis kaip fono padėtis, fono kartojimas, fono dydis ir kt. Šiame vadove CSS pavyzdžiais parodytas kelių fono paveikslėlių naudojimas.