3

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

我希望在background-image我的 div 底部重复,但即使我只应用background-image: url('assets/shadow.png');没有position,repeatbackground-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;

使用backgroundbackground-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 回答