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

【问题标题】：Why is my background image not appearing?为什么我的背景图片没有出现？
【发布时间】：2015-08-25 04:39:03
【问题描述】：

我正在尝试将重复渐变 .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;
}

^style 属性甚至没有显示，所以我打错了吗？

现在，根据各种问题：

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

【问题讨论】：

显示实际代码，而不是萤火虫输出。任何人都无法根据您发布的内容来判断图像的位置。更不用说，firebug 输出实际上不是 CSS。

标签： css html firefox background-image

【解决方案1】：

你说错了

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

应该是

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

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

【讨论】：

【解决方案2】：

Background-image 显式允许您设置背景图像，仅此而已。利用 background 属性可以让您在一行中将多个设置应用于背景。

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

这是您可以在背景属性中指定的规范：

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/

【讨论】：

【解决方案3】：

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

【讨论】：