Question

我正在尝试为我的导航栏的背景显示一个图像，我已经在这个网站和其他地方查看过几个代码和示例示例，但是，我很难解决我的错误。

这是标记：

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="img/png" href="Johns Cars Shadow.ico" />
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Johns Cars</title>
<style type="text/css">

#main {
    box-shadow: 0px 10px 10px 15px #888888;
}

</style>
</head>

<body bgcolor="#ffffff" marginwidth="95" link="#FFFFFF">
<table id="main" bgcolor="#ffffff" width="1200" align="center">
    <tr>
    <td>
    <div id="container" align="center" width="1200">
        <div id="logo">
            <table align="center" width="345" height="167">
                 <tr>
                <td>
                    <div>
                    <img src="Johns cars Shadow.png" width="341" height="167"/>
                    </div>
                </td>
          </tr>
        </table>
    </div>
    <div id="navbar">
        <ul class="cssmenu">
            <li id="active"><a href="home.html"><span>Home</span></a></li>
            <li><a href="#"><span>Products</span></a></li>
            <li><a href="#"><span>About</span></a></li>
            <li id="last"><a href="#"><span>Contact</span></a></li>
        </ul>
    </div>
</div>
</td>
</tr>
</table>

</body>
</html>

这就是css：

 ul.cssmenu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: auto;
  position: relative;
  display: block;
  height: 30px;
  font-size: 12px;
  font-weight: bold;
  background-image: transparent url(../images/nav.png) repeat-x top left;
  font-family: Arial, Helvetica, sans-serif;
  border-bottom: 1px solid #000000;
  border-top: 1px solid #000000;
 }
ul.cssmenu li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}
ul.cssmenu li a {
 display: block;
 float: left;
 color: #999999;
 text-decoration: none;
 font-weight: bold;
 padding: 8px 20px 0 20px;
}
ul.cssmenu li a:hover {
 color: #4d4d4d;
 height: 22px;
 background-image: transparent url(../images/nav.png) 0px -30px no-repeat;
}
ul.cssmenu li:active a {
 display: inline;
 height: 22px;
 background-image: transparent url(../images/nav.png) 0px -30px no-repeat;
 float: left;
 margin: 0;
}

欢迎任何帮助！

Answer 1

HTML：

<ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS：

.active {
       background:#ccc url(path/to/image/marker.png) center bottom no-repeat; 
}

Answer 2

使用属性background-image时，您也无法提供color / bgposition / bgrepeat - 在这种情况下，它只需要一个图像的url，因此这里的值被视为无效并被忽略。 background是有效的速记属性，可让您设置多个属性。

background: transparent url(../images/nav.png) repeat-x top left;

如何在导航栏中显示图像？

2 个答案: