我需要单独的背景图像<li>不同

我有这个代码（如下所示），这是一个非常简单的网页（只是进入html），正如你所看到的，有一个名为"nawbar"的div，它包含一个"ul"。我希望这个列表中的每个"li"都有不同的背景图像（原因是我在photoshop中创建了按钮图像，并希望使用这些图像而不是纯文本）。我开始给每个"li"一个id，并试图在css中操作这些id，但这并没有奏效。有人能帮我吗？如果我没有提供足够的信息，我当然可以提供更多。

非常感谢！

<head>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <title>Resonance Recording & Rehearsals</title>
</head>
<body>
    <div id="wrapper">
        <div id="header">
        </div>

        <div id="navbar">
            <ul>
                <li id="gallerybutton"> <a href="gallery.html"> Gallery </a> </li> 
                <li id="homebutton"> <a href="index.html"> Home </a> </li> 
                <li is="about_usbutton"> <a href="about_us.html"> About Us </a> </li> 
            </ul>
        </div>
        <div id="cgiform">
        </div>
        <div id="footer">
        </div>
    </div>
</body>

CSS：

body{
background-image:url("mainbg.png");
background-repeat:no-repeat;
background-color:#000000;
background-size: 100%;
height: 100%; 
width: 100%;
}
#header{
background-image:url("mainheader.png"); 
height: 146px;
width: 1000px;
margin: 0px auto;
background-size: 100%;
}
#navbar{
background-image:url("mainnavbar.png");
height: 88px;
width: 1000px;
margin: 0px auto;
background-size: 100%;
}
ul{
list-style-type: none;
list-style-position: initial;
list-style-image: initial;
padding: 28px 0px 0px 40px; /* padding syntax = top right bottom left */
}
li{
color: #fff;
display:inline; 
}
a:link {
text-decoration:none;
color: #fff;
}
a:visited {
text-decoration:none;
color: #fff;
}
a:hover {
text-decoration:underline;
color: #fff;
}
a:active {
text-decoration:underline;
color: #fff;
}
#navbar #gallerybutton{
background-image:url("gallery.png") no-repeat top center;
}

确实有几件事。你不需要在#navbar中嵌套li ID。它们是ID的事实意味着它们是唯一的元素，所以这样做只是混淆了事情。它在#navbar中并不重要，因为#gallerybutton只有一个实例。

对于每个ID，您需要以下CSS:

#ID {
    background: url("gallery.png") no-repeat top center;
}

如果你打算在CSS中使用单行背景，那么它只是background，background-image不起作用。如果你想使用它，那么你也需要使用background-position和background-repeat。

此外，我不会在你的其他元素中使用ID，但这真的是一场不同的辩论。

将"background-image"CSS属性更改为"background，如下所示。

#navbar #gallerybutton{
  background:url("gallery.png") no-repeat top center;
}

您也需要对其余ID执行此操作，（正确设置高宽）

#gallerybutton {
background:url("image.jpg") no-repeat top left; display: block; height: 50px; width: 200px;
}

相关内容

最新更新

热门标签：