Question

我有这个代码（如下所示），这是一个非常简单的网页（只是进入html），正如你所看到的，有一个名为“navbar”的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;
}

Answer 1

将“背景图片”CSS属性更改为“背景”，如下所示。

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

Answer 2

真的有几件事。您无需将li ID嵌套在#navbar中。它们是ID的事实意味着它们是独特的元素，所以你只是通过这样做来混淆事物。它在#navbar中并不重要，因为它只会是#gallerybutton的一个实例。

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

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

如果您要在CSS中使用单行背景，那么它只是background，background-image将无效。如果您想使用它，那么您还需要使用background-position和background-repeat。

此外，我不会将ID用于其他元素，但这确实是一个不同的辩论。

Answer 3

你需要为其余的ID（正确设置高度和宽度）

执行此操作

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

我需要单独的<li>的背景图片是不同的</li>

3 个答案: