„ vaizdo spraitus “ – tai technika, kai sukuriamas vienas didelis vaizdas, susidedantis iš kelių pavienių vaizdų. Ir bet kuri didelio vaizdo dalis gali būti rodoma atsižvelgiant į dizaino reikalavimus. Tai padeda kūrėjams sklandžiai sukurti vizualiai patrauklius elementus. Vaizdo sprites galima naudoti piktogramoms, mygtukams ir kitiems grafiniams elementams. Šiame straipsnyje parodyta nuosekli vaizdų sprite naudojimo CSS procedūra.
Kaip naudotis I mage Sprites CSS?
CSS programoje kūrėjai naudoja vaizdo sprites, kad sumažintų / sumažintų tinklalapio įkėlimo laiką. Tai padeda sumažinti HTTP užklausas, užtikrina greitesnį įkėlimą ir pagerina vartotojo patirties faktorių. Pavyzdžiui, apsilankykite toliau pateiktame pavyzdyje:
Pavyzdys: „Image Sprite“ naudojimas sąrašo elemente
Šiame pavyzdyje sukuriamas sutvarkytas sąrašas ir kiekviename sąrašo elemente ekrane rodoma dalis sprite vaizdo.
Būtina sąlyga:
Norint gauti konkretų vaizdą iš vaizdo sprito, ypač svarbūs yra naudojamo vaizdo sprite matmenys. Pavyzdžiui, vaizdas, kurio matmuo yra „ 937 × 156 “ parodyta žemiau:
Atlikite toliau nurodytus veiksmus, kad būtų rodoma dalis aukščiau rodomo vaizdo:
1 veiksmas: sąrašo elementų kūrimas
Netvarkingas sąrašas sukuriamas tinklalapyje, kaip matyti toliau pateiktame kodo fragmente:
< ul >Tuščia: < kad id = 'tuščia' > kad >
Pusė: < kad id = 'pusė' > kad >
Visas: < kad id = 'pilna' > kad >
ul >
Aukščiau pateikto kodo fragmento aprašymas:
-
- Pirmiausia naudokite „
“ žymą. - Tada priskirkite „ID“ tuščia “, „ pusė “ ir „ pilnas “ trims sąrašo elementams. Jie naudojami vėliau norint parodyti dalį didesnio vaizdo.
- Pirmiausia naudokite „
2 veiksmas: parodykite pirmąjį vaizdą
Kad tinklalapyje būtų rodoma tuščia širdis, kuri yra pirmasis paveikslėlio vaizdas. Naudoti ' tuščia “ id ir įterpkite šį kodą:
#tuščia {plotis: 157px;
aukštis: 150 pikselių;
fonas: url ( .. / sprite.jpg ) 0 0 ;
}
Aukščiau pateiktoje kodų eilutėje:
-
- Pirmiausia nustatykite „ plotis “ ir „ aukščio “ vaizdo, kurį kūrėjas nori rodyti tinklalapyje.
- Šios savybės yra priskiriamos vertėms ' 157 pikseliai “ ir „ 150 piks “ pagal aukščiau pateiktą pavyzdį, tačiau jie gali skirtis atsižvelgiant į skirtingų matmenų vaizdus.
- Tada nurodykite kelią sprite ' vaizdas į ' fone ' nuosavybė. Dabar nustatykite kryptį „ 0 “ ir „ 0 “ ir rodoma pirmoji vaizdo sprite dalis.
Įvykdžius aukščiau pateiktą kodo eilutę, tinklalapis atrodo taip:
Aukščiau pateikta momentinė nuotrauka rodo, kad tinklalapyje rodomas pirmasis vaizdas iš vaizdo sprite.
3 veiksmas: parodykite vidurinį ir paskutinį vaizdą
Kad būtų rodoma vidurinė ir paskutinė vaizdo dalis iš vaizdo sprite, įterpkite šias CSS ypatybes:
#half {plotis: 157px;
aukštis: 150 pikselių;
fonas: url ( .. / sprite.jpg ) -462 pikseliai 0px
}
#full {
plotis: 157px;
aukštis: 150 pikselių;
fonas: url ( .. / sprite.jpg ) -770 taškų 0px
}
Aukščiau pateikto kodo fragmento aprašymas:
-
- Pirmiausia pasirinkite „ pusė ” id ir įterpkite tas pačias CSS ypatybes, kurios buvo naudojamos aukščiau pateiktame veiksme.
- Norėdami rodyti vidurinį vaizdą iš vaizdo sprite, pakeiskite kryptį arba priskirkite užpildymą iš kairės pusės. Pavyzdžiui, kryptis iš kairės nustatyta į „ neigiamas 462px “.
- Tuo pačiu būdu parodykite paskutinį vaizdą, nustatydami kryptį iš kairės į ' -770 taškų “.
Įvykdžius aukščiau nurodytas CSS ypatybes, tinklalapis atrodo taip:
Aukščiau pateikta momentinė nuotrauka rodo, kad trys vaizdai iš vaizdų sprite buvo rodomi tinklalapyje.
Išvada
„ vaizdo spraitus “ yra vienas didelis vaizdas, sudarytas iš kelių mažesnių vaizdų, kaip ir koliažo funkcija. Ir gali būti rodoma bet kokia didelio vaizdo dalis, vaizduojanti mažesnį vaizdą. Pagal reikalavimus naudojant „ fone “ nuosavybė, kurią teikia CSS. Norėdami rodyti konkretų vaizdą iš vaizdo sprite, pirmiausia nustatykite vaizdo plotį ir aukštį. Po to naudokite krypčių reikšmes, kad būtų rodoma tik vaizdo dalis iš vaizdo sprite.