CSS/Tutorials/Hintergrund/Sprites

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Artikel lernen Sie, wie Sie grafische Elemente wie Icons, Logos und Dekorationen zu einer größeren Grafik, einem Sprite zusammenfassen können.

Funktionsweise

Icons und Dekorationsgrafiken sollten immer als Hintergrundbilder verwendet werden, um den HTML-Code übersichtlicher zu behalten.

Das Sprite, das alle Grafiken beinhaltet, wird anfangs geladen und mit background-position so verschoben, dass das einzelne Icon dann passend angezeigt wird.

Empfehlung: Wenn Sie alle Grafiken einer Webseite in einem Sprite zusammenfassen, benötigen Sie nur einen HTTP-Request. Gerade bei gif-Grafiken ist der Speicherbedarf einer größeren Grafik oft geringer als die der Summe vieler kleiner Einzelgrafiken. Dies sorgt so für eine schnelleres Laden einer Webseite.

background-position

Sie können mithilfe der Eigenschaft background-position bestimmen, an welcher Stelle sich die linken oberen Ecken der Hintergrundbilder befinden sollen. Dies wird beispielsweise angewendet, um durch Spritegrafiken die Ladezeit einer Internetseite zu verringern.

Browserunterstützung
caniuse.com
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>background-position</title>
    <style>

      ... 
      #eins { background-position: center; }
      #zwei { background-position: -50px 100px; }
      #drei { background-position: right bottom; }
      #vier { background-position: left -50px bottom 100px; }

    </style>
  </head>
  <body>
    <h1>background-position</h1>
    <div id="eins"><span class="caption">center center</span></div>
    <div id="zwei"><span class="caption">-50px 100px</span></div>
    <div id="drei"><span class="caption">right bottom</span></div>
    <div id="vier"><span class="caption">left -50px bottom 100px</span></div>
  </body>
</html>


Mit background-position positionieren Sie das Hintergrundbild innerhalb des Anzeigebereiches (siehe auch background-clip).

Anwendungsbeispiel

Ist Ihnen schon einmal unsere Iconset-Vorlage aufgefallen? Wenn Sie mit Rechtsklick das Kontextmenü öffnen und anschließend das Element untersuchen sehen Sie, dass die verschiedenen Icons in einer großen Grafik zusammengefasst sind:

Iconset.png

Das Listenelement li hat eine feste Breite und Höhe von je 32px, das darin befindliche absolut positionierte Bild wird passend verschoben. Überstehende Bereiche des Bildes werden mit overflow:hidden; ausgeblendet.

In unserem Anwendungsbeispiel wollen wir das gleiche Sprite für Hintergrundgrafiken nutzen.

Beispiel ansehen …
a {
  background: url(//wiki.selfhtml.org/images/d/d8/Iconset.png);  /*Protokoll-relative URL */
  height: 32px;
  width: 32px;
  overflow: hidden;
}
.chr{
  background-position: 0 -155px;
}
.fx {
  background-position: 0 -62px;
}
.ie {
  background-position: 0 -31px;
}
.edge {
  background-position: 373px -31px;
}
.op {
  background-position: 0 0;
}
.saf {
  background-position: 0 -93px;
}


Beispiel 
<p>    
  <a class="chr" href="https://www.google.de/chrome/browser/desktop/">Chrome</a>
  <a class="fx" href="https://www.mozilla.org/de/firefox/new/">Firefox</a>
  <a class="ie" href="windows.microsoft.com/de-de/internet-explorer/download-ie">
    Internet Explorer</a>
  <a class="edge" href="http://windows.microsoft.com/de-de/windows/preview-microsoft-edge-pc">
    Edge</a>
  <a class="op" href="http://www.opera.com/de">Opera</a>
  <a class="saf" href="https://www.apple.com/de/safari/">Safari</a>
</p>

Der Text der einzelnen Verweise wird mittels Image Replacement ausgeblendet. Anstelle dessen wird mittels background das Iconset-Sprite geladen. Höhe und Breite der einzelnen Icons sollen jeweils 32px betragen, überstehende Bereiche werden mit overflow:hidden; abgeschnitten. Jeder Verweis erhält eine Klasse. Im CSS wird nun mittels background-position der jeweils passende Bereich festgelegt. Das Iconset wird passend verschoben.

Sprites erstellen

Es gibt zwei Ansätze. Sie können bereits bei der Konzeption Ihres Webprojekts Icons entwerfen und in einem möglichst gleichmäßigen Raster anordnen. Dies erleichtert später das Berechnen der nötigen Verschiebung.

Bequemer ist die Verwendung von Sprite-Generatoren, die Sie im Internet kostenlos in Anspruch nehmen können. Sie laden Ihre Grafiken entweder einzeln oder gezippt hoch, der Generator fasst sie zu einem Sprite zusammen und entwirft dazu das passende CSS-Stylesheet.


Alternativen

  • Data-URI -Grafiken können direkt im Stylesheet integriert werden und benötigen so einen HTTP-Request weniger. Allerdings ist eine spätere Veränderung nur sehr schwer möglich.
  • Icon-Fonts ähneln Sprites, da sie ebenfalls alle Grafiken in einer Datei zusammenfassen. Darüber hinaus haben sie den Vorteil, da sie
    • als Text problemlos skalierbar sind
    • mit CSS in Farbe, Form und Schatten gestaltet werden können.
  • SVG-Sprites verbinden die Vorteile beider Ansätze, da sie
    • als Vektorgrafiken immer gestochen scharf skalierbar sind
    • durch CSS und mit den Möglichkeiten von SVG mehrfarbig gestaltet, mit Filtern verändert und sogar animiert werden können.
    • ebenfalls in Sprites zusammengefasst werden können


Weblinks

  1. ↑ Wikipedia: Sprite (Computergrafik)
  2. ↑ Wikipedia: CSS-Sprites


Sprite-Generatoren

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Hintergrund/Sprites&oldid=98727“