CSS - li 项目的背景图像

Question

所有，

我都列出了设置了背景的项目（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;
}

我对“span”标签应用了更多样式，但省略了代码，因为它不太重要。

我的问题是，当我在 .c_tabs 类（li 项）中输入以下 CSS 时，图像没有显示，firebug 报告它“无法加载给定的 url”，为什么？

background-image: url(tick.png);

非常感谢

Answer 1

这在我的 Firefox 上运行良好。确保图像在路径上可用。 CSS 中定义的 URL 期望图像文件与 CSS 文件位于同一文件夹中。如果图像文件位于其他位置，请相应更新 URL。

Answer 2

相对路径的工作方式类似于 background-image:url("../Images/transparent.gif");，而 CSS 位于 Stylesheets 文件夹中，并且 Stylesheets 和 Images 文件夹位于同一文件夹的根目录中

Answer 3

您可以使用类似的东西

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

来代替 background-image: url(tick.png);

这里我使用了repeat-x;在 x 轴上重复图像。您可以使用重复-y；或不重复；也。