Question

我正在尝试将重复渐变.png作为div的背景图像。

CSS：

background-image: url(./images/backbar.png) repeat-x;

我也用引号试了一下，没有变化。这就是Opera中的蜻蜓界面所说的：

#final_bar { 
    color: rgb(0, 0, 0);
    display: block;
}
nepan.css:43
.bar { 
    clear: both;
    margin-left: auto;
    margin-right: auto;
    width: 771px;
}
default values
div { 
    <strike>display: block;</strike>
}
Inherited from div
nepan.css:31
.wrapper { 
    <strike>color: rgb(40, 40, 40);</strike>
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 12px;
    line-height: 18px;
    text-align: left;
}

^样式属性甚至没有出现，所以我输错了吗？

现在，根据各种问题：

我的HTML和CSS文件位于同一目录中（您将注意到图像在div中使用 - 我这样做是为了确定文件是否可访问 - 它是）。
< / LI>
我现在已经在IE / Chrome / Firefox / Opera中测试了这个页面。图像本身显示为单个图像，除了在Firefox中。
http://nepaninjas.com此代码现在存在错误。

Answer 1

你宣布错了

background-image: url(./images/backbar.png) repeat-x;

应该是

background: url(./images/backbar.png) repeat-x;

如果您使用background-image，则唯一可能的值是image-url，而不是其他任何内容。

Answer 2

背景图像显式允许您设置背景图像而不是其他任何内容。利用background属性，您可以在一行中将多个设置应用于背景。

background: url(./images/backbar.png) repeat-x;

以下是您可以在background属性中指定的内容的规范：

background: { background-color background-image background-repeat background-attachment background-position | inherit } ;

另外，请记住，url中的路径是相对于CSS文件本身的位置。如果可以，我建议您使用http根目录进行文件路径。这样，如果您要重新构建或移动CSS文件，您的CSS将更加灵活，以后不会需要更新图像路径。所以，如果你能管理，我会建议：

background: url(/images/backbar.png) repeat-x;

如果您的图片位于http://domain.com/images/

Answer 3

更改背景图片的网址。如果它在外部目录中，请使用两个点而不是一个（../images而不是./images）

为什么我的背景图片没有出现？

3 个答案: