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'标签应用了更多样式，但是由于它没有那么重要而省略了代码。

我的问题是，当我将以下CSS输入到.c_tabs类（li项目）时，图像没有显示，firebug报告它“未能加载给定的URL”，为什么？

background-image: url(tick.png);

非常感谢

Answer 1

这在我的Firefox上工作正常。确保路径上的图像可用。 CSS中定义的URL期望图像文件在与CSS文件相同的文件夹中可用。如果您将图像文件放在其他位置，请相应地更新URL。

Answer 2

你可以使用像

这样的东西

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

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

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

Answer 3

相对路径可以像background-image:url("../Images/transparent.gif");一样工作，而CSS位于样式表文件夹中，样式表和图像文件夹都在同一个文件夹的根

CSS - 背景图像到li项目

3 个答案: