我需要單獨的背景圖片 <li> 與眾不同
[英]I need the background image of separate <li> to be different
問題描述
我有這段代碼（如下所示），這是一個非常簡單的網頁（只是進入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;
}
3 個解決方案
解決方案1
2 2012-04-03 09:18:59
如下將“ background-image ” CSS屬性更改為“ background ”。
#navbar #gallerybutton{
background:url("gallery.png") no-repeat top center;
}
解決方案2
2 已采納 2012-04-03 09:38:46
確實有兩件事。 您無需將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，但這確實是另一回事。
解決方案3
1 2012-04-03 09:32:10
您還需要對其余的ID進行此操作（正確設置hight n width）
#gallerybutton {
background:url("image.jpg") no-repeat top left; display: block; height: 50px; width: 200px;
}
我怎樣才能給背景圖片李？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.