' slikovni spriti ” je tehnika, pri kateri se ustvari ena velika slika, ki je sestavljena iz več posameznih slik. Kateri koli del velike slike je lahko prikazan glede na zahteve oblikovanja. Razvijalcem pomaga pri nemoteni gradnji vizualno privlačnih elementov. Sprite slike lahko uporabite za ikone, gumbe in druge grafične elemente. Ta članek prikazuje korak za korakom postopek uporabe slikovnih spritov v CSS.
Kako uporabljati I mage Sprites v CSS?
V CSS razvijalci uporabljajo slikovne sprite za minimiziranje/zmanjšanje časa nalaganja spletne strani. Pomaga pri zmanjševanju zahtev HTTP, zagotavlja hitrejše nalaganje in izboljša faktor uporabniške izkušnje. Na primer, obiščite spodnji primer:
Primer: uporaba slike Sprite v elementu seznama
V tem primeru je ustvarjen urejen seznam in v vsakem elementu seznama je del slike sprite prikazan na zaslonu.
Predpogoj:
Za pridobitev specifične slike iz slikovnega duha so dimenzije slikovnega duha, ki se uporablja, še posebej pomembne. Na primer, slika z dimenzijo ' 937×156 « je prikazano spodaj:
Sledite spodnjim korakom, da prikažete del zgoraj prikazane slike:
1. korak: Ustvarjanje elementov seznama
Neurejen seznam se ustvari na spletni strani, kot je prikazano v spodnjem delčku kode:
< ul >Prazno: < to id = 'prazno' > to >
Polovica: < to id = 'polovica' > to >
Poln: < to id = 'poln' > to >
ul >
Opis zgornjega delčka kode:
-
- Najprej uporabite »
' oznaka. - Nato dodelite ID-je » prazno ”, “ pol « in » poln ” za tri elemente seznama. Ti se kasneje uporabijo za prikaz dela večje slike.
- Najprej uporabite »
2. korak: Prikaz prve slike
Za prikaz praznega srca na spletni strani, ki je prva slika v slikovnem duhu. Uporabi ' prazno ” id in vstavite naslednjo kodo:
#prazno {širina: 157px;
višina: 150px;
ozadje: url ( .. / sprite.jpg ) 0 0 ;
}
V zgornji vrstici kod:
-
- Najprej nastavite » premer « in » višina ” slike, ki jo razvijalec želi prikazati na spletni strani.
- Te lastnosti so dodeljene vrednostim ' 157 slikovnih pik « in » 150 slikovnih pik ” v skladu z zgornjim primerom, vendar se lahko razlikujejo glede na slike z različnimi dimenzijami.
- Nato navedite pot do » sprite ' slika v ' ozadje ” lastnina. Zdaj nastavite smer ' 0 « in » 0 ” in prikaže prvi del sprite slike.
Po izvedbi zgornje vrstice kode je spletna stran videti takole:
Zgornji posnetek prikazuje, da je na spletni strani prikazana prva slika iz slike sprite.
3. korak: Prikaz srednje in zadnje slike
Za prikaz srednjega in zadnjega dela slike iz slike sprite vstavite naslednje lastnosti CSS:
#pol {širina: 157px;
višina: 150px;
ozadje: url ( .. / sprite.jpg ) -462 slikovnih pik 0px
}
#poln {
širina: 157px;
višina: 150px;
ozadje: url ( .. / sprite.jpg ) -770 slikovnih pik 0px
}
Opis zgornjega delčka kode:
-
- Najprej izberite » pol ” id in vstavite iste lastnosti CSS, ki so bile uporabljene v zgornjem koraku.
- Če želite prikazati srednjo sliko iz slike sprite, spremenite smer ali dodelite oblazinjenje z leve strani. Na primer, smer od leve je nastavljena na ' negativ 462px ”.
- Na enak način prikažite zadnjo sliko tako, da nastavite smer od leve na ' -770 slikovnih pik ”.
Po izvedbi zgornjih lastnosti CSS se spletna stran prikaže takole:
Zgornji posnetek prikazuje, da so bile tri slike iz slike sprite prikazane na spletni strani.
Zaključek
' slikovni spriti ” je ena velika slika, ki je sestavljena iz več manjših slik, tako kot funkcija kolaža. Prikaže se lahko kateri koli del velike slike, ki predstavlja manjšo sliko. V skladu z zahtevami z uporabo ' ozadje ” lastnosti, ki jih zagotavlja CSS. Če želite prikazati določeno sliko iz slike sprite, najprej nastavite širino in višino slike. Nato uporabite vrednosti navodil, da prikažete samo del slike iz slike sprite.