CSS背景颜色只显示颜色，而不是图片

Question

当我将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像素乘以12像素。

我尝试过使用CSS背景的速记方式，但只显示了颜色。

- Brett Merrifield

---

第一个问题是，图片的URL是否正确？然后您是否尝试使用Firebug或Chrome等工具查看页面呈现了什么内容。这可以帮助识别问题。 - user894932

尝试创建一个 http://jsfiddle.net/。 - GajendraSinghParihar

没事了，我太蠢了，实际上是链接图片错误了。我需要在URL中添加../。 - Brett Merrifield

我解决了这个问题，我需要添加 ../ 来返回上一级目录。谢谢大家 :] - Brett Merrifield

OP，你的问题是错误的。你说_"图像已经正确链接"_, 但是在后面的评论中你又说这是你的整个问题。我投票关闭。 - Sparky

Answer 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/

- rlemon

Answer 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
}​

- Smamatti

Answer 3

你可以尝试这个。希望它能有所帮助：

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

- Petr Vocelka