Šajā mācību rokasgrāmatā tiks parādīts, kā izmantot fona attēlus ar CSS. Tātad, sāksim!
Kā ar CSS izmantot vairākus fona attēlus?
CSS ' fons ” rekvizīts ir saīsināts rekvizīts, kas satur fona, fona pielikuma, klipa, attēla, atkārtojuma, izcelsmes, izmēra un pozīcijas rekvizītus. Fona rekvizītu var izmantot, lai norādītu vairāku attēlu vietrāžus URL. Pēc tam šie attēli tiek atbilstoši novietoti un iestatīti.
Ņemsim piemēru, kurā vienā div elementā kā tīmekļa lapas logotips ir tikai viens attēls, bet otrajā - trīs attēli.
Piemērs: vairāku fona attēlu pievienošana, izmantojot CSS
HTML valodā pievienojiet logotipam div elementu un norādiet klases nosaukumu. Piemēram, mēs to nosaucām ' logotips ”. Otrajā daļā tiek izmantoti vairāki attēli, tāpēc mēs to nosaucām par ' vairāki attēli ”. Tomēr varat norādīt klases nosaukumu atbilstoši savām vēlmēm.
HTML
< div klasē = 'logotips' >< / div >< div klasē = 'vairāki attēli' >< / div >
Nākamajā sadaļā mēs pielāgosim attēlus, izmantojot CSS fona rekvizītu.
Stila “logotipa” div
.logo {platums : 100% ;
augstums : 50 pikseļi ;
polsterējums : 5 pikseļi ;
starpība : 5 pikseļi ;
fona izmērs : 100 pikseļi ;
fona atkārtojums : nē-atkārtoties ;
fona attēls : url ( images/linux-logo.png ) ;
}
Div elements ar klasi ' logotips ” tiek lietots ar šādām īpašībām:
- ' platums ' rekvizīts tiek izmantots, lai iestatītu elementa platumu uz ' 100% ”.
- ' augstums ' rekvizīts tiek izmantots, lai iestatītu elementa augstumu uz ' 50 pikseļi ”.
- ' polsterējums rekvizīts tiek izmantots, lai iestatītu 5 pikseļi ” atstarpi ap norādīto elementa saturu.
- ' starpība rekvizīts tiek izmantots, lai iestatītu 5 pikseļi ” telpa ap elementu.
- ' fona izmērs ' rekvizīts iestata elementa fona attēla izmēru kā ' 100 pikseļi ”.
- ' fona atkārtojums ' ar vērtību ' nē-atkārtoties ” parāda fonu tikai vienu reizi.
- ' fona attēls ” rekvizīts tiek izmantots, lai norādītu attēla URL.
Stils “vairāki attēli” div
.vairāki attēli {platums : 90% ;
augstums : 45vh ;
starpība : 1 pikselis auto ;
polsterējums : 20 pikseļi ;
fona izmērs : 150 pikseļi ;
fona krāsa : rgb ( 157 , 154 , 151 ) ;
fona attēls : url ( images/office.png ) , url ( images/html.png ) , url ( images/laptop.png ) ;
fona atkārtojums : nē-atkārtoties , nē-atkārtoties , nē-atkārtoties ;
fona pozīcija : pa kreisi , centrs , pa labi ;
}
Tagad izveidojiet otra konteinera stilu šādi:
- ' fona krāsa ” rekvizīts norāda elementa fona krāsu.
- ' fona attēls ” īpašums norāda vairākus attēlu URL.
- ' fona atkārtojums ” rekvizīts iestata attēlu vērtības fona attēla rekvizītā norādīto attēlu secībā. Abi attēli ir iestatīti kā neatkārtojami, tas nozīmē, ka tie tiks rādīti pārlūkprogrammā tikai vienu reizi.
- ' fona pozīcija ” pielāgo attēla pozīciju fona attēla rekvizīta norādītajā attēlu secībā. Pirmais attēls tiks iestatīts kreisajā pusē, otrais centrā un trešais tiks novietots labajā pusē.
Iesniedzot iepriekš norādīto kodu, rezultāts pārlūkprogrammā izskatīsies šādi:
Tādā veidā mēs varam pielāgot vairāku attēlu pozīciju, izmantojot CSS.
Secinājums
Lai lietojumprogramma būtu izklaidējoša un interaktīva, izstrādātāji izmanto dažādus attēlus un krāsas. Mēs varam iestatīt vairākus attēlus ar CSS fona rekvizītiem, piemēram, fona pozīciju, fona atkārtojumu, fona izmēru un daudz ko citu. Šajā rokasgrāmatā ir parādīta vairāku fona attēlu izmantošana ar CSS piemēriem.