由于某种原因，我的链接栏上的背景图片没有显示答案

【问题标题】：For some reason the background image on my link bar is not showing由于某种原因，我的链接栏上的背景图片没有显示
【发布时间】：2013-04-02 11:28:38
【问题描述】：

我已经为此工作了几个小时，但我无法弄清楚。有一段时间我让它正确显示背景图像，现在它无法正常工作。

HTML：

<head>
    <link type="text/css" rel="stylesheet" href="css/normalize.css" media="screen"/>
    <link type="text/css" rel="stylesheet" href="css/grid.css" media="screen"/>
    <link type="text/css" rel="stylesheet" href="css/stylesheet.css" media="screen"/>
    <script type="text/javascript" src="js/js.js"></script>
</head>
<body>
    <div class="container">
        <img src="images/logo.png" class="logo grid_4 none">
        <img src="images/4seasons.jpg" class="head grid_8 omega none">
        <ul class="links grid_9">
                <a href="#"><li><img src="images/icons/home.png"></li></a>
                <a href="#"><li><img src="images/icons/menu.png"></li></a>
                <a href="#"><li><img src="images/icons/about.png"></li></a>
                <a href="#"><li><img src="images/icons/contact.png"></li></a>
        </ul>
        <img src="images/icons/bar.gif" class="bar none">
    </div>
</body>

我不知道这是怎么回事，但我很感激任何帮助！这是 CSS：

.logo {
    float:left;
}
.head {
    margin-top:2%;
}
.bar {
    width:100%;
    margin-top:-5%;
}

/*Links*/

.links {
    position:relative;
    float:left;
    list-style-type:none;
}
.links li {
    float:left;
    margin-left:0%;
}
.links li:hover {
    background: url("images/icons/bg.png");
}

【问题讨论】：

你能给我们你网站的链接吗？

标签： php html css image background

【解决方案1】：

您不能将<a> 作为<ul> 或<ol> 的直接子代，只有<li> 有效，因此请将您的标记更改为：

 <ul class="links grid_9">
    <li><a href="#"><img src="images/icons/home.png"></a></li>
    <li><a href="#"><img src="images/icons/menu.png"></a></li>
    <li><a href="#"><img src="images/icons/aboute.png"></a></li>
    <li><a href="#"><img src="images/icons/contact.png"></a></li>
 </ul>

【讨论】：

实际上问题是我的样式表和我的 index.php 不在同一个文件夹中，我忘记了将链接设为“../images...”
我明白了.. 我的回答仍然适用，因为某些浏览器 (ahem IE) 会给您带来麻烦，将 <a> 作为列表的直接子级 :)

【解决方案2】：

尝试使用 a:hover 作为链接。也许“a”元素在“li”元素的前面，这样它就阻止了对鼠标悬停的检测。

.links li a:hover {
    background: url("images/icons/bg.png");
}

希望有帮助！

【讨论】：

【解决方案3】：

将您的 html 更改为以下内容：

html

<ul class="links grid_9">
  <li class="home"><a href="#">home</a></li>
  <li class="menu"><a href="#">menu</a></li>
  <li class="about"><a href="#">about</a></li>
  <li class="contact"><a href="#">contact</a></li>
</ul>

css

.links {float:left}
.links li {float:left; list-style-type:none}
.links li a {
    float:left;
    text-indent:-5000px;
    height:20px; /* set your own dimention */
    width:20px; /* set your own dimention */
    background-repeat:no-repeat;
}
.links li.home a {background-image:url(images/icons/home.png);}
.links li.menu a {background-image:url(images/icons/menu.png);}
.links li.about a {background-image:url(images/icons/about.png);}
.links li.contact a {background-image:url(images/icons/contact.png);}

.links li a:hover {background: url("images/icons/bg.png");}

希望对您有所帮助...

【讨论】：