CSS3多重背景无法工作

Question

我想用CSS3创建一个带有两个背景的简单div。我已经创建了一个JS Fiddle，其中包含我尝试做的示例：http://jsfiddle.net/nfcyv/。

然而，它没有生效，我希望有人能指出原因或给我提供一个有益的提示。

以下是CSS的副本：

#box { background:url("http://i.imgur.com/pAmGs.png") no-repeat scroll center bottom #000, url("http://i.imgur.com/fDMpm.png") repeat scroll 0 0 #000;height:500px;width:500px }

- John

Answer 1

只能为最后一层指定背景颜色，因此您需要从声明中删除第一个#000：

#box {
    background:url("http://i.imgur.com/pAmGs.png") no-repeat scroll center bottom, 
               url("http://i.imgur.com/fDMpm.png") repeat scroll 0 0 #000;
    height:500px;
    width:500px
}

Updated fiddle

- BoltClock

Answer 2

试一下这个

#box { 
    background:url("http://i.imgur.com/pAmGs.png") no-repeat center bottom, 
    url("http://i.imgur.com/fDMpm.png") repeat scroll 0 0 #000;
    height:500px;width:500px;
}

- w3uiguru