跨度中的背景圖片將不會顯示在沒有span標籤

Question

下面的跨度不會背景圖片，如果我刪除了內部文本XXX任何文本

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

但是它的工作原理沒有XXX的兼容模式。

如何使它在沒有任何內部文本的情況下工作？

Answer 1

因爲跨度默認爲沒有寬度或高度的內聯元素。在CSS更改爲：

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

jsFiddle example

通過從在線變更顯示到inline-block的可以設置跨度的寬度和高度。

Answer 2

您需要添加一個寬度，並且可能需要做display:inline-block，否則寬度爲0，因此不可見。

Answer 3

span元素是內聯元素，因此沒有寬度或高度。您必須在元素css中指定它應顯示爲塊或內嵌塊，然後指定圖像的寬度和高度。

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

Example