den ' bild sprites ” är en teknik där en stor bild skapas som består av flera enstaka bilder. Och vilken del av den stora bilden som helst kan visas i förhållande till designkraven. Det hjälper utvecklare att bygga visuellt tilltalande element smidigt. Bildsprites kan användas för ikoner, knappar och andra grafiska element. Den här artikeln visar steg-för-steg-proceduren för att använda bildsprites i CSS.
Hur man använder I mage Sprites i CSS?
I CSS använder utvecklarna image sprites för att minimera/minska laddningstiden för en webbsida. Det hjälper till att minska HTTP-förfrågningar, säkerställer snabbare laddning och förbättrar användarupplevelsen. Besök till exempel nedanstående exempel:
Exempel: Använda Image Sprite i listobjekt
I det här exemplet skapas en ordnad lista och i varje listobjekt visas en del av spritebilden på skärmen.
Nödvändig förutsättning:
För att få den specifika bilden från bildspriten är dimensionerna på den bildspriten som används särskilt viktiga. Till exempel bilden som har dimensionen ' 937×156 ' visas nedan:
Följ stegen nedan för att visa en del av bilden som visas ovan:
Steg 1: Skapa listobjekt
Den oordnade listan genereras på webbsidan, som visas i kodavsnittet nedan:
< ul >Tömma: < den där id = 'tömma' > den där >
Halv: < den där id = 'halv' > den där >
Full: < den där id = 'full' > den där >
ul >
Beskrivningen av ovanstående kodavsnitt:
-
- Använd först '
'-tagg. - Tilldela sedan ID:n för ' tömma ”, “ halv ' och ' full ” för tre listobjekt. Dessa används senare för att visa en del av den större bilden.
- Använd först '
Steg 2: Visar den första bilden
För att visa det tomma hjärtat på webbsidan som är den första bilden i bildspriten. Använd ' tömma ” id och infoga följande kod:
#empty {bredd: 157px;
höjd: 150px;
bakgrund: url ( .. / sprite.jpg ) 0 0 ;
}
I ovanstående kodrad:
-
- Ställ först in ' bredd ' och ' höjd ” av bilden som utvecklaren vill visa på webbsidan.
- Dessa egenskaper tilldelas värdena för ' 157 pixlar ' och ' 150 pixlar ” enligt det ovan angivna exemplet, men de kan variera i förhållande till bilderna med olika dimensioner.
- Ange sedan sökvägen för ' sprite ' bild till ' bakgrund ' fast egendom. Ställ nu in riktningen för ' 0 ' och ' 0 ” och den visar den första delen av bildens sprite.
Efter exekvering av ovanstående kodrad ser webbsidan ut så här:
Ovanstående ögonblicksbild visar att den första bilden från bildspriten visas på webbsidan.
Steg 3: Visar mitten och sista bilden
För att visa mitten och sista bilddelen från bildspriten, infoga följande CSS-egenskaper:
#halva {bredd: 157px;
höjd: 150px;
bakgrund: url ( .. / sprite.jpg ) -462 pixlar 0px
}
#full {
bredd: 157px;
höjd: 150px;
bakgrund: url ( .. / sprite.jpg ) -770 pixlar 0px
}
Beskrivningen av ovanstående kodavsnitt:
-
- Välj först ' halv ” id och infoga samma CSS-egenskaper som används i steget ovan.
- För att visa mittenbilden från bildspriten, ändra riktning eller tilldela utfyllnad från vänster sida. Till exempel är riktningen från vänster inställd på ' negativ 462px ”.
- På samma sätt, visa den sista bilden genom att ställa in riktningen från vänster till ' -770 pixlar ”.
Efter exekveringen av ovanstående CSS-egenskaper ser webbsidan ut så här:
Ovanstående ögonblicksbild visar att de tre bilderna från bildspriten har visats på webbsidan.
Slutsats
den ' bild sprites ” är en enda stor bild som består av flera mindre bilder precis som collagefunktionen. Och vilken del av den stora bilden som representerar en mindre bild kan visas. Enligt kraven med hjälp av ' bakgrund ” egendom tillhandahållen av CSS. För att visa den specifika bilden från bildspriten, ställ först in bildens bredd och höjd. Därefter använder du riktningsvärdena för att endast visa den del av bilden från bildspriten.