带2张图片的HTML背景

Question

我有一幅50px宽和340px高的图片。图片应该重复到左侧，但不能向下。然后我在页面顶部有这张照片的连胜。而其余的页面（下）应该是另一张图片。

这里是我的发言：

background: url("images/bg.png") repeat-x scroll left top #2C9E2E; 

但现在我想最后一块改变#2C9E2到url("images/bg-body.gif")，但它不会工作。

我尝试这样做的代码：

body{ 
    background: url("images/bg.png") repeat-x scroll left top url("images/bg-body.gif"); 
} 

Answer 1

background为多个声明的简写，并且url("images/bg.png")和#2C9E2E件分别指定background-image和background-color。

要显示多个分层背景，您需要用逗号分隔多个声明（background: <top background>, <bottom background>）。此外，颜色声明只能出现在最后一个背景图层上。

所以，如果你想bg.png对BG-body.png的顶部出现既背后平坦的颜色，你可以使用：

background: url("images/bg.png") repeat-x scroll left top, url("images/bg-body.gif") #2C9E2E; 

根据需要第二后台添加附加属性（例如重复/滚动/位置），并且如果您不希望在两个图像背后都去掉颜色值。

---

另请注意，IE8不支持多种背景（http://caniuse.com/#feat=multibackgrounds）。如果您需要支持IE8或更高版本，则需要指定单个背景回退。

background: url("images/bg.png") repeat-x scroll left top #2C9E2E; 
background: url("images/bg.png") repeat-x scroll left top, url("images/bg-body.gif") #2C9E2E;