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李背景问题

回答

相关问题