files/de/web/css/css_images/implementing_image_sprites_in_css/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

---
title: Implementing image sprites in CSS
slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
tags:
  - Anleitung
  - CSS
  - CSS Bilder
  - Fortgeschrittene
  - Grafik
  - NeedsContent
  - Sprites
  - Web
translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
---
<div>{{APIRef}}</div>

<p>Image Sprites werden in zahlreichen Webanwendungen verwendet, wo mehrere Bilder verwendet werden. Statt jedes Bild als eine eigene Bilddatei einzubinden, ist es wesentlich speicher- und bandbreitenfreundlicher, sie als ein einzelnes Bild zu schicken, um die Anzahl an HTTP Anfragen zu verringern.</p>

<h2 id="Implementierung">Implementierung</h2>

<p>Angenommen, jedem Element mit der Klasse <code>toolbtn</code> wird ein Bild zugewiesen:</p>

<pre class="brush:css">.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}</pre>

<p>Eine Hintergrundposition kann entweder über zwei x- und y-Werte nach der {{cssxref("url()")}} dem Hintergrund hinzugefügt werden oder als {{cssxref("background-position")}}. Als Beispiel:</p>

<pre class="brush:css">#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}</pre>

<p>Dies verschiebt das Element mit der ID 'btn1' um 20 Pixel nach links und das Element mit der ID 'btn2' um 40 Pixel nach links (unter Annahme, dass diesen die Klasse <code>toolbtn</code> zugewiesen wurde und durch die obere CSS Regel beeinflusst werden).</p>

<p>Ebenso können Hover-Status erstellt werden mit:</p>

<pre class="brush:css">#btn:hover {
  background-position: <var>&lt;nach rechts verschobene Pixel&gt;</var>px <var>&lt;nach unten verschobene Pixel&gt;</var>px;
}</pre>

<h2 id="Siehe_auch">Siehe auch</h2>

<p><a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Voll funktionsfähige Demo bei CSS Tricks</a></p>