Wie verwende ich ein CSS-Sprite für ein sich wiederholendes Hintergrundbild?

Question

Dies ist etwas, mit dem ich in der Vergangenheit Probleme hatte und es ist in meinen Gedanken, also habe ich ein einfaches Beispiel Sprite-Bild gemacht, um es zu testen und hoffentlich ein paar Antworten zu bekommen.

Wenn Sie meinen Code und Demo sehen hier http://dabblet.com/gist/2263037

Sie sehen, dass ich ein einfaches div haben, die ein Hintergrundbild verwendet

Unterhalb dieser DIV habe ich das gleiche div aber dieses Mal, wenn ich versuchen, Verwenden Sie stattdessen ein CSS Sprite Bild

Also meine Frage, ist es möglich, das Aussehen des ersten DIV mit diesem Sprite-Bild zu replizieren oder sind Änderungen am Sprite-Bild erforderlich?

Ohne Sprite Bild

/* Notice wrapper with Single Image */ 
.notice-wrap { 
    margin-top: 10px; padding: 0 .7em; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #CD0A0A; 
    background: #B81900 url(http://www.getklok.com/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; 
} 

Mit Sprite Bild

/* Notice wrapper with SPRITE Image */ 
.notice-wrap-sprite { 
    margin-top: 10px; padding: 0 .7em; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #CD0A0A; 
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite.png) repeat; 
    background-position: 0 -52px; 
} 

HTML

<div class="notice-wrap"> 
     <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div> 

<BR><BR><BR> 

<div class="notice-wrap-sprite"> 
     <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div> 

Answer 1

Einstellung der Sprite

up Sie können ein Bild Sprite verwenden zu tun, was Sie wollen. Sie können sich nur entlang einer Achse wiederholen, d. H. Wiederholen-x, aber in Ihrem Fall ist das alles, was Sie brauchen. Auch dein Bild innerhalb des Sprites muss die gesamte Breite durchlaufen, so weiß der Browser es zu kacheln.

Der Trick ist Ihr wiederholter Hintergrund muss sich über die VOLLE BREITE Ihres Sprite-Bildes erstrecken. Das ist entscheidend.Hier ist dein Bild, modifiziert, um dieses Kriterium zu erfüllen:

Einrichten der CSS

Jetzt sind wir verweisen Sie wie gewohnt, und es wird funktionieren:

/* Notice wrapper with SPRITE Image */ 
.notice-wrap-sprite { 
    margin-top: 10px; padding: 0 .7em; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #CD0A0A; 
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite3.png) repeat-x; 
    background-position: 0 -52px; 
} 

Answer 2

Ich denke, muss man auf seine eigene Zeile in diesem Fall das Sprite setzen. Dies sollte funktionieren, da Ihr Bild vertikal auf eine festgelegte Höhe beschränkt ist. So sieht es zumindest im Beispiel aus.

Zusätzlich müsste das Bild die gleiche Breite wie das Sprite haben. Der Grund, aus dem das Hintergrundbild die Breite des Sprites erweitern muss, ist, dass Sie sich über die x-Achse wiederholen und wenn sich links von Ihrem Sprite ein Leerzeichen oder ein anderes Bild befindet, erhalten Sie etwas ähnliches wie in Ihrem Beispiel.

In Ihrem Beispiel passen die Bilder in Ihrem Sprite möglicherweise nicht gut zu diesem Hintergrundbild, da sie so breit sind. Es wäre also besser, wenn Sie andere Bilder auswählen, die der Größe dieses Hintergrundbildes entsprechen, wahrscheinlich mehr Hintergrundbilder, da Sie normalerweise dünnere Bilder verwenden können. Siehe Beispiel unten, das ich auf einer meiner Websites verwende. Wie msigman sagte, können Sie repeat-x hinzufügen, um sicherzustellen, dass der Hintergrund nur entlang der x-Achse wiederholt wird, aber wenn Sie Ihr div auf eine bestimmte Höhe beschränkt und das Sprite korrekt positioniert haben, repeat-x ist vielleicht egal, aber es ist sicherer.