CSS
CSS Image Sprites

Syntax

• // Använda bakgrundsposition
  bakgrund: url ("sprite-image.png");
  bakgrundsposition: -20px 50px;
• // Bakgrundsegenskaper kortfattad
  bakgrund: url ("sprite-image.png") -20px 50px;

Anmärkningar

En grundläggande implementering

Vad är en bildsprite?

En bildsprite är en enda tillgång som finns inom ett bildspriteark. Ett bildsprite-ark är en bildfil som innehåller mer än en tillgång som kan extraheras från den.

Till exempel:

Bilden ovan är ett bildsprite-ark, och var och en av dessa stjärnor är en sprite i sprite-arket. Dessa sprite-ark är användbara eftersom de förbättrar prestanda genom att minska antalet HTTP-förfrågningar som en webbläsare kan behöva göra.

Så hur implementerar du en? Här är några exempelkoder.

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;
}

Genom att ställa in sprite's bredd och höjd och använda bakgrundspositionegenskapen i CSS (med ett x- och y-värde) kan du enkelt extrahera sprites från ett sprite-ark med CSS.