背景圖片顯示不出來

我希望把背景圖像從一個類的列表項：背景圖片顯示不出來

<ul> 
<li> Stuff </li> 
<li> More Stuff </li> 
<li class= "horizdotted" </li> 
</ul>

這裏的CSS

.horizdotted { 
background-image: url("images/horizdotted.png"); 
background-repeat:no-repeat;}

這不工作，任何瀏覽器......看起來我必須在LI中至少有一些信息（除了背景圖像）。所以，我做了一個白色像素PNG，並嘗試另一種方式：

<ul> 
<li> Stuff </li> 
<li> More Stuff </li> 
<li class= "horizdotted"><img src="images/pixel.png" alt="teeny pixel" /> </li> 
</ul>

相同的CSS。這適用於Chrome和Firefox，但不適用於IE。我不能，對於我的生活，讓它在IE中工作。如果可以的話請幫忙！！這是第二種方式的Chrome中的圖像（帶有小像素）。 [東西，更多的東西在無序列表，虛線] http://www.flickr.com/photos/[email protected]/20892/in/photostream/

來源

2012-12-29 Anne

設置寬度和高度在CSS

.horizdotted { 
    background-image: url("images/horizdotted.png"); 
    background-repeat:no-repeat; 
    width:50px; 
    height:50px; 
}

組根據您的圖片大小這個屬性，你想要的。

來源

2012-12-29 05:25:02

哦，你真棒！修好了！我仍然不確定爲什麼我需要寬度和高度，但它工作！ – Anne

jsFiddle for IE

您需要添加內容到你的li使之具有的東西顯現。另外，在你的問題中你有一個語法錯誤。它缺少一個右括號>符號。在等級名稱後面也有一個空格。

HTML：

<ul> 
    <li> Stuff </li> 
    <li> More Stuff </li> 
    <li class="horizdotted">Some stuff to view background.</li> 
</ul>

CSS：

.horizdotted { 
    background-image:url(http://placehold.it/500x17/00ff00); 
    background-repeat: no-repeat; 
}

jsFiddle for IE: No CSS

而且，由於它只是你要顯示的虛線，則沒有CSS是必要的：

HTML：

<ul> 
    <li> Stuff </li> 
    <li> More Stuff </li> 
    <li>-----------------</li> 
</ul>

來源

2012-12-29 05:34:24 arttronics

在CSS中添加背景圖片的寬度和高度可以解決問題。我只想要圖像，沒有文字或任何東西，所以我添加了一點白色像素......它解決了除IE以外的所有瀏覽器中的問題。然後當我添加寬度和高度時，我不再需要即使是小像素。現在li類只有

，裏面什麼都沒有......而且它在瀏覽器中可以正常顯示。好極了！謝謝你的幫助！ – Anne

背景圖片顯示不出來

回答

相關問題