' pildi spraidid ” on tehnika, mille käigus luuakse üks suur pilt, mis koosneb mitmest üksikust pildist. Ja mis tahes osa suurest pildist saab kuvada vastavalt disaininõuetele. See aitab arendajatel luua sujuvalt visuaalselt atraktiivseid elemente. Pildi spraite saab kasutada ikoonide, nuppude ja muude graafiliste elementide jaoks. See artikkel demonstreerib samm-sammult pildispriite CSS-is kasutamise protseduuri.
Kuidas kasutada I mage Sprites CSS-is?
CSS-is kasutavad arendajad pildi spraite, et minimeerida/vähendada veebilehe laadimisaega. See aitab vähendada HTTP-päringuid, tagab kiirema laadimise ja parandab kasutajakogemuse tegurit. Näiteks külastage allolevat näidet:
Näide: Image Sprite'i kasutamine loendiüksuses
Selles näites luuakse järjestatud loend ja igas loendiüksuses kuvatakse ekraanil osa spraiti kujutisest.
Eeltingimus:
Konkreetse pildi saamiseks pildispriidist on eriti olulised kasutatava pildispriite mõõtmed. Näiteks pilt, mille mõõde on ' 937 × 156 ” on näidatud allpool:
Järgige allolevaid samme, et kuvada osa ülaltoodud pildist.
1. samm: loendiüksuste loomine
Järjestamata loend luuakse veebilehel, nagu on näha allolevast koodilõigust:
< ul >Tühi: < et id = 'tühi' > et >
Pool: < et id = 'pool' > et >
Täielik: < et id = 'täis' > et >
ul >
Ülaltoodud koodilõigu kirjeldus:
-
- Esmalt kasutage '
” silti. - Järgmisena määrake ID-d tühi ”, „ pool ” ja „ täis ” kolme loendiüksuse jaoks. Neid kasutatakse hiljem osa suuremast pildist kuvamiseks.
- Esmalt kasutage '
2. samm: esimese pildi kuvamine
Tühja südame kuvamiseks veebilehel, mis on pildispriite esimene pilt. Kasuta ' tühi ” id ja sisestage järgmine kood:
#tühi {laius: 157 pikslit;
kõrgus: 150 pikslit;
taust: url ( .. / sprite.jpg ) 0 0 ;
}
Ülaltoodud koodireal:
-
- Esmalt määrake ' laius ” ja „ kõrgus ” pildist, mida arendaja soovib veebilehel kuvada.
- Need omadused on määratud väärtustele ' 157 pikslit ” ja „ 150 pikslit ” vastavalt ülaltoodud näitele, kuid need võivad erinevate mõõtmetega piltide puhul erineda.
- Järgmisena esitage ' sprite ' pilt ' taustal ” vara. Nüüd määrake suund ' 0 ” ja „ 0 ” ja see kuvab pildi spraiti esimese osa.
Pärast ülaltoodud koodirea täitmist näeb veebileht välja järgmine:
Ülaltoodud hetktõmmis näitab, et veebilehel kuvatakse esimene pilt pildi spraidist.
3. samm: keskmise ja viimase pildi kuvamine
Kujutise keskmise ja viimase pildiosa kuvamiseks sisestage järgmised CSS-i atribuudid:
#pool {laius: 157 pikslit;
kõrgus: 150 pikslit;
taust: url ( .. / sprite.jpg ) -462 pikslit 0 pikslit
}
#full {
laius: 157 pikslit;
kõrgus: 150 pikslit;
taust: url ( .. / sprite.jpg ) -770 pikslit 0 pikslit
}
Ülaltoodud koodilõigu kirjeldus:
-
- Esmalt valige ' pool ” id ja sisestage samad CSS-i atribuudid, mida kasutati ülaltoodud sammus.
- Keskmise pildi kuvamiseks pildisprite'ist muutke suunda või määrake vasakpoolsest servast polsterdus. Näiteks suund vasakult on seatud ' negatiivne 462 pikslit ”.
- Samal viisil kuvage viimane pilt, määrates suuna vasakult ' -770 pikslit ”.
Pärast ülaltoodud CSS-i atribuutide täitmist näeb veebileht välja selline:
Ülaltoodud hetktõmmis näitab, et kolm pildisprite'i pilti on veebilehel kuvatud.
Järeldus
' pildi spraidid ” on üks suur pilt, mis koosneb mitmest väiksemast pildist, nagu kollaažifunktsioon. Ja suure pildi mis tahes osa, mis esindab väiksemat pilti, saab kuvada. Vastavalt nõuetele, kasutades ' taustal ” atribuut, mille pakub CSS. Konkreetse pildi kuvamiseks pildispriidist määrake esmalt pildi laius ja kõrgus. Pärast seda kasutage juhiste väärtusi, et kuvada ainult pildi spraidist osa pildist.