div 的 CSS 背景只会显示颜色，而不是图像答案

【问题标题】：CSS Background for a div will only display color, not the imagediv 的 CSS 背景只会显示颜色，而不是图像
【发布时间】：2012-12-20 15:19:45
【问题描述】：

当我将 CSS background 应用到我的 div 标记时，颜色会起作用，但 background-image 不会显示。

我希望 background-image 在我的 div 底部重复，但即使我只应用 background-image: url('assets/shadow.png'); 而没有 position、repeat 或 background-color，它仍然不会显示。只显示白色。

但如果我申请background-color: #ECECFB;，background-color 将在后台正确显示。

为什么background-image 不起作用？

CSS

#slider-container,#footer-container,#main aside {
    background-color: #ECECFB;
    background-image: url('assets/shadow.png');
    background-repeat: repeat-x;
    background-position: bottom;
}

图片链接正确。图片为 15 x 12 像素。

我尝试了速记 CSS 背景，只显示颜色。

【问题讨论】：

第一个问题。图片的网址是否正确？那么您是否尝试过使用 firebug 或 chrome 等效项来查看页面上呈现的内容。这有助于发现问题。
尝试创建jsfiddle.net
没关系，我很愚蠢，实际上链接图像错误。我需要在 url 中添加一个 ../。
背景位置需要两个值。
OP，你的问题是错误的。您声明“图像链接正确”，但后来在 cmets 中您声明这是您的全部问题。投票结束。

标签： css html background-image background-color

【解决方案1】：

看看下面我的小提琴，注意它工作正常。如果图像没有下载（即错误的 url），则只会出现背景颜色。检查 chrome 开发工具上的位置或网络选项卡，以查看是否未加载背景图像 (404)。

<div class="foo"></div>
.foo {
 background-color: red;
 background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
 background-repeat: repeat-x;
 background-position: bottom;
 height: 500px;
 width: 500px;   
}

http://jsfiddle.net/rlemon/XCbK4/

【讨论】：

【解决方案2】：

background 属性也可用于显示图像。

语法

background: color position size repeat origin clip attachment image;

同时使用background 和background-image 时，可能会发生冲突。我假设使用 background-color 的行为由于某种原因而有所不同，或者您使用它们的顺序可能很重要。

这当然也会给你颜色而不是图像：

#slider-container,#footer-container,#main aside {
    background-image: url('assets/shadow.png');
    background: #ECECFB;  // overwriting the image
}

【讨论】：

【解决方案3】：

你可以试试这个。我希望它会有所帮助：

#slider-container,#footer-container,#main aside {
background: #ECECFB url('assets/shadow.png') repeat-x bottom
}

【讨论】：