Das Hintergrundbild in der Spanne zeigt nicht ohne Text im span-Tag

Question

Die Spanne unten nicht Hintergrundbild, wenn ich den Text um xxx

<span style='background-image:url("http://gifsoup.com/web/images/soc4.gif")' style="height: 30px;"> 
xxx 
</span> 

jedoch ohne die xxx in den Werken entfernen Kompatibilitätsmodus.

Wie kann ich es ohne inneren Text arbeiten lassen?

Answer 1

Da erstreckt sich standardmäßig auf Inline-Elemente, die keine Breite oder Höhe haben. Ändern Sie die CSS:

span { 
    display:inline-block; 
    width:30px; 
    background-image:url("http://gifsoup.com/web/images/soc4.gif"); 
    height:30px; 
} 

jsFiddle example

Durch die Anzeige von Inline-Wechsel zu Inline-Block Sie die Breite und Höhe der Spanne einstellen.

Answer 2

Sie müssen eine Breite hinzufügen, und müssen display:inline-block tun, sonst ist die Breite 0, also ist nicht sichtbar.

Answer 3

Das Span-Element ist ein Inline-Element und hat als solches weder Breite noch Höhe. Sie müssen in den Elementen css angeben, dass es entweder als Block oder Inline-Block angezeigt werden soll, und dann die Breite und Höhe für das Bild angeben.

span{ 
    display: inline-block; 
    background-image:url("http://gifsoup.com/web/images/soc4.gif"); 
    width:30px; 
    height:30px; 
    border-radius: 5px; 
} 

Example