„ sprite-uri de imagine ” este o tehnică în care se creează o singură imagine mare care constă din mai multe imagini individuale. Și orice parte a imaginii mari poate fi afișată în raport cu cerințele de proiectare. Ajută dezvoltatorii să construiască fără probleme elemente atractive din punct de vedere vizual. Sprite-urile de imagine pot fi folosite pentru pictograme, butoane și alte elemente grafice. Acest articol demonstrează procedura pas cu pas de utilizare a sprite-urilor de imagine în CSS.
Cum se utilizează I Mage Sprites în CSS?
În CSS, dezvoltatorii folosesc sprite-uri de imagine pentru a minimiza/reduce timpul de încărcare a unei pagini web. Ajută la reducerea solicitărilor HTTP, asigură o încărcare mai rapidă și îmbunătățește factorul experienței utilizatorului. De exemplu, vizitați exemplul de mai jos:
Exemplu: Utilizarea Image Sprite în Listă Element
În acest exemplu, este creată o listă ordonată și în fiecare element din listă, o parte din imaginea sprite este afișată pe ecran.
Condiție preliminară:
Pentru a obține imaginea specifică din sprite-ul de imagine, dimensiunile sprite-ului de imagine care este utilizat sunt deosebit de importante. De exemplu, imaginea care are o dimensiune de „ 937×156 ” este prezentat mai jos:
Urmați pașii de mai jos pentru a afișa o parte din imaginea afișată mai sus:
Pasul 1: Crearea articolelor din listă
Lista neordonată este generată pe pagina web, așa cum se vede în fragmentul de cod de mai jos:
< ul >Gol: < acea id = 'gol' > acea >
Jumătate: < acea id = 'jumătate' > acea >
Deplin: < acea id = 'deplin' > acea >
ul >
Descrierea fragmentului de cod de mai sus:
-
- În primul rând, utilizați „
' etichetă. - Apoi, atribuiți ID-urile lui „ gol ”, “ jumătate ' și ' deplin ” pentru trei articole din listă. Acestea sunt utilizate ulterior pentru a afișa o parte a imaginii mai mari.
- În primul rând, utilizați „
Pasul 2: Afișarea primei imagini
Pentru a afișa inima goală pe pagina web, care este prima imagine din sprite-ul imaginii. Folosește ' gol ” id și introduceți următorul cod:
#gol {lățime: 157px;
înălțime: 150px;
fundal: url ( .. / sprite.jpg ) 0 0 ;
}
În rândul de coduri de mai sus:
-
- Mai întâi, setați „ lăţime ' și ' înălţime ” a imaginii pe care dezvoltatorul dorește să o afișeze pe pagina web.
- Aceste proprietăți sunt atribuite valorilor „ 157px ' și ' 150px ” conform exemplului de mai sus, dar pot varia în raport cu imaginile cu dimensiuni diferite.
- Apoi, furnizați calea „ sprite ' imaginea către ' fundal ” proprietate. Acum, setați direcția „ 0 ' și ' 0 ” și afișează prima parte a sprite-ului imaginii.
După executarea liniei de cod de mai sus, pagina web arată astfel:
Instantaneul de mai sus arată că prima imagine din sprite-ul imaginii este afișată pe pagina web.
Pasul 3: Afișarea imaginii din mijloc și ultimei
Pentru a afișa partea din mijloc și ultima imagine din sprite-ul imaginii, inserați următoarele proprietăți CSS:
#jumătate {lățime: 157px;
înălțime: 150px;
fundal: url ( .. / sprite.jpg ) -462px 0px
}
#plin {
lățime: 157px;
înălțime: 150px;
fundal: url ( .. / sprite.jpg ) -770px 0px
}
Descrierea fragmentului de cod de mai sus:
-
- Mai întâi, selectați „ jumătate ” id și inserați aceleași proprietăți CSS care sunt utilizate în pasul de mai sus.
- Pentru a afișa imaginea din mijloc din sprite-ul imaginii, schimbați direcția sau atribuiți umplutură din partea stângă. De exemplu, direcția de la stânga este setată la „ negativ 462px ”.
- În același mod, afișați ultima imagine setând direcția de la stânga la „ -770px ”.
După executarea proprietăților CSS de mai sus, pagina web apare astfel:
Instantaneul de mai sus arată că cele trei imagini din sprite-ul imaginii au fost afișate pe pagina web.
Concluzie
„ sprite-uri de imagine ” este o singură imagine mare care este alcătuită din mai multe imagini mai mici, la fel ca funcția de colaj. Și poate fi afișată orice porțiune a imaginii mari care reprezintă o imagine mai mică. În conformitate cu cerințele utilizând „ fundal ” proprietate furnizată de CSS. Pentru a afișa imaginea specifică din sprite-ul imaginii, setați mai întâi lățimea și înălțimea imaginii. După aceea, utilizați valorile direcțiilor pentru a afișa numai o parte a imaginii din sprite-ul imaginii.