CSS - 背景图像到一个项目

我有列表项目有一个背景设置为他们（RGBA值）。

现在我想添加另一个图像使用CSS3背景图像属性到每个列表项。出于某种原因，此图像不会显示在列表项旁边。

HTML：

   <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; 
}

有更多的造型伊夫应用到 '跨度' 标签，但ahve省略代码它并不重要。

我的问题是，当我向.c_tabs类（li项目）输入以下CSS时，图像不显示，萤火虫报告它'无法加载给定的网址'，为什么？

background-image: url(tick.png);

非常感谢

来源

2011-03-26 Kayote

你确定你要链接到图像是否正确？它是否与CSS文件位于同一个目录中？ – Hristo 2011-03-26 05:37:23

谢谢Hristo，就是这样。我走错了路......我昨晚整夜都在困惑，为什么它不工作。干杯， – Kayote 2011-03-26 06:26:22

这对我在Firefox上的最终工作很好。确保图像在路径上可用。在CSS中定义的URL期望图像文件可以在与CSS文件相同的文件夹中可用。如果您的映像文件位于其他位置，请相应地更新网址。

来源

2011-03-26 06:09:43 Kangkan

谢谢康康。我不相信我没有看到路径上的问题。非常感谢， – Kayote 2011-03-26 06:27:03

该死......我以为CSS中的相对路径会链接，就像它从HTML目录开始，而不是从CSS目录开始。也许它必须包含CSS作为链接 – JorgeeFG 2012-07-25 19:18:50

您可以像使用

background:url(tick.png) 0 100% repeat-x;

，而不是background-image: url(tick.png);

这里我用重复-X的一些事情;在x轴上重复图像。你可以使用repeat-y;或不重复;太。

来源

2011-03-26 05:33:25 Varada

相对路径会像这样工作background-image:url("../Images/transparent.gif");而CSS是一种样式文件夹中，这两个样式表和图片文件夹是在同一个文件夹的根目录

来源

2012-10-05 13:18:07 bjan

CSS - 背景图像到一个项目

回答

相关问题