CSS李背景問題

我有一個水平導航，我試圖爲李類使用圖像，但是，當我嘗試.nav li .home{background:img url;}圖像不顯示，我該如何解決這個問題？CSS李背景問題

CSS

.nav { 
    position: absolute; 
    height: 20px; 
    width: 100%; 
    background-image: url(images/nav.png); 
    background-repeat: repeat; 
    left: 0px; 
    top: 0px; 
    margin: 0px; 
    padding: 0px; 
    z-index: 3; 
} 
.nav li { 
    padding-left: 10px; 
    list-style-type: none; 
    margin-top: auto; 
    margin-bottom: auto; 
} 
.nav li a { 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 
.nav li.home { 
    background: url(images/home.png); 
}

HTML：

<ul class="nav"> 
<li> 
<a herf="#" class="home">home</a> 
</li> 
</ul>

來源

2011-08-19 rumspringa00

我試圖用影像爲李家班

.nav li .home不靶向裏。它將針對li中類名爲「home」的元素進行定位。沒有HTML源代碼，我無法給出明確的解決方案。但如果我猜的話，你的HTML是這樣的：

<ul> 
<li class="home"> 
    <a href="index.html">home</a> 
</li> 
<li class="about"> 
    <a href="about.html">about</a> 
</li> 
</ul>

在這種情況下，你將你的CSS更改爲：

.nav li.home

通過刪除空間，李是有針對性的。

來源

2011-08-19 17:50:04 JoJo

謝謝，我用html源代碼更新了op。我嘗試了你的建議，但我仍然無法獲取images/home.png來顯示。 – rumspringa00

您的<li>必須有一個值 - 否則它不會出現。您可以使用 或真正的文本，如「home」和設置文本縮進：-999;將其移出屏幕。

來源

2011-08-19 17:58:31

現在真的很困惑。這非常有意義，但我仍然無法看到背景圖像。有什麼想法嗎？ – rumspringa00

你選擇 .nav li.home 將選擇類的「家」列表項在您的情況，列表項沒有一個類。家裏，它具有類的列表項中的鏈接。 li.home會對HTML的以下行的工作：

<ul class="nav"> 
<li class='home'> 
<a herf="#"></a> 
</li> 
</ul>

但是當你編輯此行.nav li .home與李和。家裏之間的空白，它會選擇與家居類元素「內部」名單項目。在這種情況下，背景將被添加到<a herf="#" class="home"></a>，因此圖像將成爲鏈接。這是可能的。

您還必須給背景寬度和高度的元素以適應背景圖像。如果元素爲0x0，則無法看到背景。

您是否還檢查過網址？如果你直接在瀏覽器中訪問圖像的路徑，它會給你一個404錯誤嗎？

來源

2011-08-19 18:09:39 vanErp

CSS李背景問題

回答

相關問題