' kuva spritejä ” on tekniikka, jossa luodaan yksi suuri kuva, joka koostuu useista yksittäisistä kuvista. Ja mikä tahansa osa suuresta kuvasta voidaan näyttää suhteessa suunnitteluvaatimuksiin. Se auttaa kehittäjiä rakentamaan visuaalisesti houkuttelevia elementtejä sujuvasti. Kuvaspriitejä voidaan käyttää kuvakkeissa, painikkeissa ja muissa graafisissa elementeissä. Tämä artikkeli esittelee vaiheittaisen prosessin kuvaspriitien käyttämiseksi CSS:ssä.
Kuinka käyttää I mage Sprites CSS:ssä?
CSS:ssä kehittäjät käyttävät kuvaspriitejä minimoimaan/vähentämään verkkosivun latausaikaa. Se auttaa vähentämään HTTP-pyyntöjä, varmistaa nopeamman latauksen ja parantaa käyttökokemustekijää. Katso esimerkiksi alla oleva esimerkki:
Esimerkki: Image Sprite käyttäminen luettelokohteessa
Tässä esimerkissä luodaan järjestetty luettelo ja jokaisessa luettelokohdassa osa sprite-kuvasta näkyy näytöllä.
Edellytys:
Tietyn kuvan saamiseksi kuvaspritistä käytettävän kuvaspriten mitat ovat erityisen tärkeitä. Esimerkiksi kuva, jonka ulottuvuus on ' 937×156 ' näkyy alla:
Noudata alla olevia ohjeita näyttääksesi osan yllä näkyvästä kuvasta:
Vaihe 1: Luettelokohteiden luominen
Järjestämätön luettelo luodaan verkkosivulle alla olevan koodinpätkän mukaisesti:
< ul >Tyhjä: < että id = 'tyhjä' > että >
Puoli: < että id = 'puoli' > että >
Koko: < että id = 'koko' > että >
ul >
Yllä olevan koodinpätkän kuvaus:
-
- Käytä ensin '
' -tunniste. - Määritä seuraavaksi tunnukset ' tyhjä ”, “ puoli ' ja ' koko ” kolmelle luettelokohdalle. Näitä käytetään myöhemmin näyttämään osa suuremmasta kuvasta.
- Käytä ensin '
Vaihe 2: Näytä ensimmäinen kuva
Tyhjän sydämen näyttäminen verkkosivulla, joka on ensimmäinen kuva kuvaspritissä. Käytä ' tyhjä ” id ja lisää seuraava koodi:
#tyhjä {leveys: 157px;
korkeus: 150px;
tausta: url ( .. / sprite.jpg ) 0 0 ;
}
Yllä olevalla koodirivillä:
-
- Aseta ensin ' leveys ' ja ' korkeus ' kuvasta, jonka kehittäjä haluaa näyttää verkkosivulla.
- Nämä ominaisuudet on määritetty arvoille ' 157 pikseliä ' ja ' 150 pikseliä ” edellä esitetyn esimerkin mukaan, mutta ne voivat vaihdella erikokoisten kuvien mukaan.
- Anna seuraavaksi polku sprite 'kuva '' tausta ” omaisuutta. Aseta nyt suunta ' 0 ' ja ' 0 ' ja se näyttää kuvaspriten ensimmäisen osan.
Yllä olevan koodirivin suorittamisen jälkeen verkkosivu näyttää tältä:
Yllä oleva tilannekuva osoittaa, että ensimmäinen kuva kuvaspritistä näkyy verkkosivulla.
Vaihe 3: Näytä keskimmäinen ja viimeinen kuva
Jos haluat näyttää kuvan keskimmäisen ja viimeisen kuvaosan, lisää seuraavat CSS-ominaisuudet:
#half {leveys: 157px;
korkeus: 150px;
tausta: url ( .. / sprite.jpg ) -462 kuvapistettä 0px
}
#täysi {
leveys: 157px;
korkeus: 150px;
tausta: url ( .. / sprite.jpg ) -770 pikseliä 0px
}
Yllä olevan koodinpätkän kuvaus:
-
- Valitse ensin ' puoli ” id ja lisää samat CSS-ominaisuudet, joita käytetään yllä olevassa vaiheessa.
- Jos haluat näyttää kuvan keskimmäisen kuvan, muuta suuntaa tai määritä täyttö vasemmasta reunasta. Esimerkiksi suunta vasemmalta on asetettu ' negatiivinen 462px ”.
- Näytä samalla tavalla viimeinen kuva asettamalla suunta vasemmalta kohtaan ' -770 pikseliä ”.
Yllä olevien CSS-ominaisuuksien suorittamisen jälkeen verkkosivu näyttää tältä:
Yllä oleva tilannekuva osoittaa, että kuvaspriten kolme kuvaa on näkynyt verkkosivulla.
Johtopäätös
' kuva spritejä ” on yksi suuri kuva, joka koostuu useista pienemmistä kuvista, kuten kollaasiominaisuus. Ja mikä tahansa osa suuresta kuvasta, joka edustaa pienempää kuvaa, voidaan näyttää. Vaatimusten mukaan käyttämällä ' tausta CSS:n tarjoama omaisuus. Jos haluat näyttää tietyn kuvan kuvaspritistä, aseta ensin kuvan leveys ja korkeus. Käytä sen jälkeen suunta-arvoja näyttääksesi vain osan kuvasta kuvaspritistä.