Sprite -> HIlfe benötigt

[Fullscreen]

Hallo,

ich habe mit dem Spritegen -> http://de.spritegen.website-performance.org/ mir einen Sprite generiert.
Jetzt habe ich folgenden Code Angezeigt bekommen

.sprite-12572{ background-position: 0 0; width: 60px; height: 60px; }  
.sprite-15180{ background-position: -65px 0; width: 60px; height: 60px; }  
.sprite-1816{ background-position: -130px 0; width: 60px; height: 60px; }  
.sprite-1987{ background-position: -195px 0; width: 60px; height: 60px; }  
  
#container li {  
    background: url(csg-52a30825ecb0c.png) no-repeat top left;  
}

Jetzt möchte ich gerne bei diversen SPAN's die Sprites aufrufen.
<span class="sprite-15180"></span>
zeigt nichts an. Ich habe mich versuch in CSS ein zu lesen. Und gefunden das offenbar etwas umgestellt werden muss Nun also:

span {  
    background: url(csg-52a30825ecb0c.png) no-repeat top left;  
}

Aber nochimmer keine Änderung HILFE

[Matthias Apsel]

Om nah hoo pez nyeetz, Fullscreen!

Wie das mit den Sprites funktioniert kannst du auf dieser Seite nachlesen. Dann könntest du vielleicht auch dein Problem sehen. Möglicherweise ist das span-Element nicht groß genug. Wir können ohne Kenntnis der Seite so ziemlich genau überhaupt nichts konkretes dazu beitragen.

Matthias

[T-Rex]

Ich vermute das Span hat keinen Inhalt. Dann ist es schlicht zu klein für das Hintergrundbild.
Also:
display: block; -> oder -> display: inline-block;
width: 24px (bzw. deine größe);
height: 24px (bzw. deine größe);

Dann solltest du etwas sehen.

Gruß
Counter Strike Source beherrschender
T-Rex

[Gunnar Bittersmann]

@@Fullscreen:

nuqneH

#container li {

background: url(csg-52a30825ecb0c.png) no-repeat top left;
}

  
Die background-Eigenschaft setzt viele background-…-Eigenschaften, auch nicht explizit angegebene (diese auf ihren Defaultwert). Obiges ist äquivalent zu:  
  
~~~css
#container li {  
    background-color: transparent;  
    background-position: top left;  
    background-size: auto auto;  
    background-repeat: no-repeat no-repeat;  
    background-clip: border-box;  
    background-origin: padding-box;  
    background-attachment: scroll;  
    background-image: url(csg-52a30825ecb0c.png);  
}

Da der Selektor '#container li' spezifischer ist als '.sprite-…', kommen die background-position-Angaben in diesen Regeln nicht zur Anwendung.

'span' ist weniger spezifisch. Wenn die '#container li'-Regel nicht mehr  da ist, sollten die background-position-Angaben Wirkung zeigen.

Qapla'

[MudGuard]

Hi,

#container li {

background: url(csg-52a30825ecb0c.png) no-repeat top left;
}

>   
> Die background-Eigenschaft setzt viele background-…-Eigenschaften, auch nicht explizit angegebene (diese auf ihren Defaultwert). Obiges ist äquivalent zu:  
>   
> ~~~css

#container li {  

>     background-color: transparent;  
>     background-position: top left;  
>     background-size: auto auto;  
>     background-repeat: no-repeat no-repeat;  
>     background-clip: border-box;  
>     background-origin: padding-box;  
>     background-attachment: scroll;  
>     background-image: url(csg-52a30825ecb0c.png);  
> }

Da der Selektor '#container li' spezifischer ist als '.sprite-…', kommen die background-position-Angaben in diesen Regeln nicht zur Anwendung.

'span' ist weniger spezifisch. Wenn die '#container li'-Regel nicht mehr  da ist, sollten die background-position-Angaben Wirkung zeigen.

Und was hat der Selector "#container li" mit dem
<span class=".sprite-…"></span>
zu tun? Warum sollten die background-Eigenschaften für die .sprite… nicht wirken, nur weil für völlig andere Elemente andere background-Eigenschaften gesetzt werden?

cu,
Andreas