Sök…


Syntax

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

Anmärkningar

För vissa användningsfall faller spriter långsamt ur fördel och ersätts av ikonens webbfonter eller SVG-bilder .

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:

ett grundläggande sprittark

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.



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow