Question

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

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

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

为什么background-color无效？

CSS

background-image

图像已正确链接。图像为15像素×12像素。

我尝试了简写的CSS背景，只显示了颜色。

Answer 1

请看下面的小提琴，注意它工作正常。如果图像没有下载（即坏网址），则仅显示背景颜色。检查chrome dev工具上的位置或网络选项卡，查看是否未加载背景图像（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/

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
}

Answer 3

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

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

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

3 个答案:

语法