' attēlu spraiti ” ir tehnika, kurā tiek izveidots viens liels attēls, kas sastāv no vairākiem atsevišķiem attēliem. Un jebkuru lielā attēla daļu var parādīt atbilstoši dizaina prasībām. Tas palīdz izstrādātājiem nevainojami izveidot vizuāli pievilcīgus elementus. Attēlu spraitus var izmantot ikonām, pogām un citiem grafiskiem elementiem. Šajā rakstā ir parādīta soli pa solim procedūra attēlu spraitu izmantošanai CSS.
Kā lietot I mage Sprites CSS?
CSS izstrādātāji izmanto attēlu spraitus, lai samazinātu/samazinātu tīmekļa lapas ielādes laiku. Tas palīdz samazināt HTTP pieprasījumus, nodrošina ātrāku ielādi un uzlabo lietotāja pieredzes faktoru. Piemēram, apmeklējiet tālāk redzamo piemēru:
Piemērs: Image Sprite izmantošana saraksta vienumā
Šajā piemērā tiek izveidots sakārtots saraksts un katrā saraksta vienumā ekrānā tiek parādīta daļa no sprite attēla.
Priekšnosacījums:
Lai iegūtu konkrētu attēlu no attēla spraita, īpaši svarīgi ir izmantotā attēla spraita izmēri. Piemēram, attēlam, kura dimensija ir “ 937 × 156 ” ir parādīts zemāk:
Veiciet tālāk norādītās darbības, lai parādītu kādu daļu no iepriekš parādītā attēla:
1. darbība: saraksta vienumu izveide
Nesakārtotais saraksts tiek ģenerēts tīmekļa lapā, kā redzams tālāk esošajā koda fragmentā:
< ul >Tukšs: < ka id = 'tukšs' > ka >
Puse: < ka id = 'puse' > ka >
Pilns: < ka id = 'pilns' > ka >
ul >
Iepriekš minētā koda fragmenta apraksts:
-
- Vispirms izmantojiet '
” tagu. - Pēc tam piešķiriet ID tukšs ”, “ puse ' un ' pilns ” trim saraksta vienumiem. Tie tiek izmantoti vēlāk, lai parādītu daļu no lielāka attēla.
- Vispirms izmantojiet '
2. darbība. Pirmā attēla parādīšana
Lai parādītu tukšo sirdi tīmekļa lapā, kas ir pirmais attēls attēla sprite. Izmantojiet ' tukšs ” id un ievietojiet šādu kodu:
#empty {platums: 157 pikseļi;
augstums: 150 pikseļi;
fons: url ( .. / sprite.jpg ) 0 0 ;
}
Iepriekš minētajā kodu rindā:
-
- Vispirms iestatiet ' platums ' un ' augstums ” attēla, kuru izstrādātājs vēlas parādīt tīmekļa lapā.
- Šie rekvizīti ir piešķirti vērtībām ' 157 pikseļi ' un ' 150 pikseļi ” saskaņā ar iepriekš sniegto piemēru, taču tie var atšķirties atkarībā no attēliem ar dažādiem izmēriem.
- Pēc tam norādiet ceļu uz ' sprite ' attēlu uz ' fons ” īpašums. Tagad iestatiet virzienu ' 0 ' un ' 0 ” un tiek parādīta attēla sprite pirmā daļa.
Pēc iepriekš minētās koda rindas izpildes tīmekļa lapa izskatās šādi:
Iepriekš redzamais momentuzņēmums parāda, ka tīmekļa lapā tiek parādīts pirmais attēls no attēla sprite.
3. darbība: vidējā un pēdējā attēla parādīšana
Lai parādītu attēla sprite vidējo un pēdējo attēla daļu, ievietojiet šādus CSS rekvizītus:
#half {platums: 157 pikseļi;
augstums: 150 pikseļi;
fons: url ( .. / sprite.jpg ) -462 pikseļi 0 pikseļi
}
#full {
platums: 157 pikseļi;
augstums: 150 pikseļi;
fons: url ( .. / sprite.jpg ) -770 pikseļi 0 pikseļi
}
Iepriekš minētā koda fragmenta apraksts:
-
- Vispirms atlasiet “ puse ” id un ievietojiet tos pašus CSS rekvizītus, kas tiek izmantoti iepriekš minētajā darbībā.
- Lai parādītu vidējo attēlu no attēla sprite, mainiet virzienu vai piešķiriet polsterējumu no kreisās puses. Piemēram, virziens no kreisās puses ir iestatīts uz ' negatīvs 462 pikseļi ”.
- Tādā pašā veidā parādiet pēdējo attēlu, iestatot virzienu no kreisās uz ' -770 pikseļi ”.
Pēc iepriekš minēto CSS rekvizītu izpildes tīmekļa lapa izskatās šādi:
Iepriekš redzamais momentuzņēmums parāda, ka tīmekļa lapā ir parādīti trīs attēli no attēla sprite.
Secinājums
' attēlu spraiti ” ir viens liels attēls, kas sastāv no vairākiem mazākiem attēliem, tāpat kā kolāžas funkcija. Un var parādīt jebkuru lielā attēla daļu, kas attēlo mazāku attēlu. Saskaņā ar prasībām, izmantojot “ fons ” īpašums, ko nodrošina CSS. Lai parādītu konkrēto attēlu no attēla sprite, vispirms iestatiet attēla platumu un augstumu. Pēc tam izmantojiet virzienu vērtības, lai parādītu tikai attēla daļu no attēla sprite.