' slikovni duhovi ” je tehnika u kojoj se stvara jedna velika slika koja se sastoji od više pojedinačnih slika. I bilo koji dio velike slike može se prikazati u odnosu na zahtjeve dizajna. Pomaže programerima da glatko izgrade vizualno privlačne elemente. Sprite slike mogu se koristiti za ikone, gumbe i druge grafičke elemente. Ovaj članak demonstrira korak-po-korak postupak korištenja slikovnih spritova u CSS-u.
Kako koristiti I mage Sprites u CSS-u?
U CSS-u programeri koriste slikovne spriteove kako bi minimizirali/skratili vrijeme učitavanja web stranice. Pomaže u smanjenju HTTP zahtjeva, osigurava brže učitavanje i poboljšava faktor korisničkog iskustva. Na primjer, pogledajte primjer u nastavku:
Primjer: korištenje slike Sprite u stavci popisa
U ovom primjeru kreiran je uređeni popis iu svakoj stavci popisa dio slike spritea prikazan je na zaslonu.
Preduvjet:
Za dobivanje određene slike iz slikovnog duha, dimenzije slikovnog elementa koji se koristi su posebno važne. Na primjer, slika koja ima dimenziju ' 937×156 ” prikazano je u nastavku:
Slijedite korake u nastavku za prikaz dijela gore prikazane slike:
Korak 1: Stvaranje stavki popisa
Neuređeni popis generira se na web stranici, kao što se vidi u donjem isječku koda:
< ul >Prazan: < da iskaznica = 'prazan' > da >
Pola: < da iskaznica = 'pola' > da >
Puno: < da iskaznica = 'pun' > da >
ul >
Opis gornjeg isječka koda:
-
- Prvo upotrijebite '
” oznaka. - Zatim dodijelite ID-ove za ' prazan ”, “ pola ' i ' puna ” za tri stavke popisa. Oni se kasnije koriste za prikaz dijela veće slike.
- Prvo upotrijebite '
Korak 2: Prikaz prve slike
Za prikaz praznog srca na web stranici koja je prva slika u spriteu slike. Koristiti ' prazan ” id i umetnite sljedeći kod:
#prazno {širina: 157px;
visina: 150px;
pozadina: url ( .. / sprite.jpg ) 0 0 ;
}
U gornjem retku kodova:
-
- Prvo postavite ' širina ' i ' visina ” slike koju programer želi prikazati na web stranici.
- Ova svojstva se dodjeljuju vrijednostima ' 157 px ' i ' 150 px ” prema gore navedenom primjeru, ali mogu varirati u odnosu na slike različitih dimenzija.
- Zatim navedite putanju ' sprite ' slika u ' pozadina ” vlasništvo. Sada postavite smjer ' 0 ' i ' 0 ” i prikazuje prvi dio sprite slike.
Nakon izvršenja gornjeg retka koda, web stranica izgleda ovako:
Gornja snimka pokazuje da je prva slika iz slike sprite prikazana na web stranici.
Korak 3: Prikaz srednje i zadnje slike
Za prikaz srednjeg i posljednjeg dijela slike iz slike, umetnite sljedeća CSS svojstva:
#pola {širina: 157px;
visina: 150px;
pozadina: url ( .. / sprite.jpg ) -462px 0px
}
#pun {
širina: 157px;
visina: 150px;
pozadina: url ( .. / sprite.jpg ) -770px 0px
}
Opis gornjeg isječka koda:
-
- Prvo odaberite ' pola ” id i umetnite ista CSS svojstva koja su korištena u gornjem koraku.
- Da biste prikazali srednju sliku iz sprite slike, promijenite smjer ili dodijelite ispunu s lijeve strane. Na primjer, smjer slijeva postavljen je na ' negativ 462 px ”.
- Na isti način, prikažite posljednju sliku postavljanjem smjera slijeva na ' -770px ”.
Nakon izvršenja gornjih CSS svojstava, web stranica izgleda ovako:
Gornja snimka pokazuje da su tri slike iz slike sprite prikazane na web stranici.
Zaključak
' slikovni duhovi ” je jedna velika slika koja se sastoji od više manjih slika baš kao i značajka kolaža. I može se prikazati bilo koji dio velike slike koji predstavlja manju sliku. Prema zahtjevima koristeći ' pozadina ” svojstvo koje pruža CSS. Da biste prikazali određenu sliku iz sprite slike, prvo postavite širinu i visinu slike. Nakon toga upotrijebite vrijednosti uputa za prikaz samo dijela slike iz slikovnog lika.