CSS
CSS Image Sprites

Syntaxis

• // Achtergrondpositie gebruiken
  background: url ("sprite-image.png");
  achtergrondpositie: -20px 50px;
• // Achtergrond eigenschap steno
  background: url ("sprite-image.png") -20px 50px;

Opmerkingen

Een basisimplementatie

Wat is een afbeelding sprite?

Een afbeeldingssprite is een enkel middel dat zich in een afbeeldingssprrite-blad bevindt. Een afbeelding sprite sheet is een afbeeldingbestand dat meer dan één activum bevat dat eruit kan worden geëxtraheerd.

Bijvoorbeeld:

De afbeelding hierboven is een afbeelding sprite sheet, en elk van die sterren is een sprite binnen de sprite sheet. Deze sprite-bladen zijn nuttig omdat ze de prestaties verbeteren door het aantal HTTP-aanvragen te verminderen dat een browser mogelijk moet doen.

Dus hoe implementeer je er een? Hier is een voorbeeldcode.

HTML

<div class="icon icon1"></div>
<div class="icon icon2"></div>
<div class="icon icon3"></div>

CSS

.icon {
    background: url(“icons-sprite.png”);
    display: inline-block;
    height: 20px;
    width: 20px;
}
.icon1 {
      background-position: 0px 0px;
}
.icon2 {
      background-position: -20px 0px;
}
.icon3 {
      background-position: -40px 0px;
}

Door de breedte en hoogte van de sprite in te stellen en door de eigenschap background-position in CSS (met een x- en y-waarde) te gebruiken, kunt u eenvoudig sprites uit een sprite-blad extraheren met behulp van CSS.