3

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

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

但是，如果我应用WILL 会在后台正确显示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 背景，只显示颜色。

4

3 回答 3

2

看看下面我的小提琴，注意它工作正常。如果图像没有下载（即错误的 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/

于 2012-12-20T15:23:23.093 回答
0

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

#slider-container,#footer-container,#main aside {
background: #ECECFB url('assets/shadow.png') repeat-x bottom
}
于 2012-12-20T23:33:35.010 回答
0

该background属性还可用于显示图像。

句法

background: color position size repeat origin clip attachment image;

使用background和background-image同时使用时可能会发生冲突。我认为 usingbackground-color由于某种原因表现不同，或者您使用它们的顺序可能很重要。

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

#slider-container,#footer-container,#main aside {
    background-image: url('assets/shadow.png');
    background: #ECECFB;  // overwriting the image
}​
于 2012-12-20T15:34:25.090 回答