CSS -对li项的背景图像
CSS -对li项的背景图像
提问于 2011-03-26 04:15:36
全,
我有一个背景设置为它们的列表项(RGBA值)。
现在，我想使用CSS3背景图像属性向每个列表项添加另一个图像。由于某些原因，此图像没有显示在列表项旁边。
<div id="c_top_bar">
<ul>
<li id="c_collar" class="c_tabs"><span>Collar/ Neckline</span></li><li id="c_body" class="c_tabs"><span>Body</span></li><li id="c_sleeve" class="c_tabs"><span>Sleeve</span></li><li id="c_colour" class="c_tabs"><span>Colour</span></li>
</ul>
</div>，这里是CSS
#c_top_bar ul {
position: relative;
top: 30px;
left: 40px;
width: 650px;
height: 48px;
overflow: hidden;
border: 1px solid rgba(207,207,207,1);
-moz-box-shadow: 0px 1px 2px rgba(207,207,207,0.5);
-webkit-box-shadow: 0px 1px 2px rgba(207,207,207,0.5);
box-shadow: 0px 1px 2px rgba(207,207,207,0.5);
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.c_tabs {
display: inline-block;
width: 25%;
height: 48px;
list-style-type: none;
text-align: center;
-moz-text-shadow: 0px 1px 2px rgba(255,255,255,1);
-webkit-text-shadow: 0px 1px 2px rgba(255,255,255,1);
text-shadow: 0px 1px 0px rgba(255,255,255,1);
background-image: url(tick.png);
}
.c_tabs:first-child {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.c_tabs:last-child {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}我在“span”标记上应用了更多的样式，但忽略了代码，因为它并不重要。
我的问题是，当我向.c_tabs类(Failed)输入以下CSS时，图像没有显示，firebug报告它“未能加载给定的url”，为什么？
background-image: url(tick.png);非常感谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-03-26 06:09:43
在Firefox上，这在我的终端运行得很好。确保路径上的图像可用。CSS中定义的URL期望图像文件与CSS文件的文件夹相同。如果图像文件位于不同的位置，则相应地更新URL。
Stack Overflow用户
发布于 2011-03-26 05:33:25
你可以用一些东西
background:url(tick.png) 0 100% repeat-x;而不是background-image: url(tick.png);
这里我用了-x；来重复x轴上的图像。你也可以使用“重复”或“不重复”。
Stack Overflow用户
发布于 2012-10-05 13:18:07
相对路径将类似于此background-image:url("../Images/transparent.gif");，而CSS位于样式表文件夹中，而样式表和图像文件夹都位于同一文件夹的根目录中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5440354
复制相关文章
相似问题
腾讯云开发者
