De ' beeldsprites ” is een techniek waarbij één grote afbeelding wordt gemaakt die uit meerdere afzonderlijke afbeeldingen bestaat. En elk deel van de grote afbeelding kan worden weergegeven in verhouding tot de ontwerpvereisten. Het helpt ontwikkelaars om visueel aantrekkelijke elementen soepel te bouwen. Afbeeldingssprites kunnen worden gebruikt voor pictogrammen, knoppen en andere grafische elementen. Dit artikel demonstreert de stapsgewijze procedure voor het gebruik van beeldsprites in CSS.
Hoe te gebruiken I Mage Sprites in CSS?
In CSS gebruiken de ontwikkelaars beeldsprites om de laadtijd van een webpagina te minimaliseren/verkorten. Het helpt bij het verminderen van HTTP-verzoeken, zorgt voor sneller laden en verbetert de gebruikerservaring. Bezoek bijvoorbeeld het onderstaande voorbeeld:
Voorbeeld: Image Sprite gebruiken in lijstitem
In dit voorbeeld wordt een geordende lijst gemaakt en in elk lijstitem wordt een deel van de sprite-afbeelding op het scherm weergegeven.
Voorwaarde:
Om de specifieke afbeelding van de afbeeldingsprite te krijgen, zijn de afmetingen van de gebruikte afbeeldingssprite bijzonder belangrijk. Bijvoorbeeld, het beeld dat een dimensie heeft van ' 937×156 ” wordt hieronder getoond:
Volg de onderstaande stappen om een deel van de hierboven weergegeven afbeelding weer te geven:
Stap 1: Aanmaken van lijstitems
De ongeordende lijst wordt gegenereerd op de webpagina, zoals te zien is in het onderstaande codefragment:
< ul >Leeg: < Dat ID kaart = 'leeg' > Dat >
Half: < Dat ID kaart = 'half' > Dat >
Vol: < Dat ID kaart = 'vol' > Dat >
ul >
De beschrijving van het bovenstaande codefragment:
-
- Gebruik eerst de '
' label. - Wijs vervolgens de id's toe van ' leeg ”, “ half ' En ' vol ” voor drie lijstitems. Deze worden later gebruikt om een deel van de grotere afbeelding weer te geven.
- Gebruik eerst de '
Stap 2: de eerste afbeelding weergeven
Om het lege hart op de webpagina weer te geven dat de eerste afbeelding is in de afbeeldingssprite. Gebruik de ' leeg ” id en voer de volgende code in:
#leeg {breedte: 157px;
hoogte: 150px;
achtergrond: url ( .. / sprite.jpg ) 0 0 ;
}
In de bovenstaande coderegel:
-
- Stel eerst de ' breedte ' En ' hoogte ' van de afbeelding die de ontwikkelaar op de webpagina wil weergeven.
- Deze eigenschappen worden toegewezen aan de waarden van ' 157px ' En ' 150px ” volgens het hierboven gegeven voorbeeld, maar ze kunnen variëren ten opzichte van de afbeeldingen met verschillende afmetingen.
- Geef vervolgens het pad op van de ' geest ” afbeelding naar de “ achtergrond ' eigendom. Stel nu de richting in van ' 0 ' En ' 0 ” en het toont het eerste deel van de afbeeldingsprite.
Na het uitvoeren van de bovenstaande coderegel ziet de webpagina er als volgt uit:
De bovenstaande snapshot laat zien dat de eerste afbeelding van de afbeeldingsprite op de webpagina wordt weergegeven.
Stap 3: de middelste en laatste afbeelding weergeven
Om het middelste en laatste afbeeldingsgedeelte van de afbeeldingsprite weer te geven, voegt u de volgende CSS-eigenschappen in:
#half {breedte: 157px;
hoogte: 150px;
achtergrond: url ( .. / sprite.jpg ) -462px 0px
}
#vol {
breedte: 157px;
hoogte: 150px;
achtergrond: url ( .. / sprite.jpg ) -770px 0px
}
De beschrijving van het bovenstaande codefragment:
-
- Selecteer eerst de ' half ” id en voeg dezelfde CSS-eigenschappen in die in de bovenstaande stap worden gebruikt.
- Om de middelste afbeelding van de afbeeldingsprite weer te geven, verandert u de richting of wijst u opvulling toe vanaf de linkerkant. De richting van links is bijvoorbeeld ingesteld op ' negatief 462px ”.
- Geef op dezelfde manier het laatste beeld weer door de richting van links naar ' -770px ”.
Na het uitvoeren van de bovenstaande CSS-eigenschappen, ziet de webpagina er als volgt uit:
De bovenstaande snapshot laat zien dat de drie afbeeldingen van de afbeeldingsprite op de webpagina zijn weergegeven.
Conclusie
De ' beeldsprites ” is een enkele grote afbeelding die is samengesteld uit meerdere kleinere afbeeldingen, net als de collagefunctie. En elk deel van de grote afbeelding dat een kleinere afbeelding vertegenwoordigt, kan worden weergegeven. Volgens de vereisten met behulp van de ' achtergrond ” eigenschap geleverd door CSS. Om de specifieke afbeelding van de afbeeldingsprite weer te geven, stelt u eerst de breedte en hoogte van de afbeelding in. Gebruik daarna de richtingswaarden om alleen het deel van de afbeelding van de afbeeldingsprite weer te geven.