Question

我有一张宽50像素，高340像素的图片。图片应重复到左侧，但不能向下。然后我在页面顶部看到了这张照片。页面的其余部分（下）应该是另一张图片。

以下是我的发言：

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;

带有2张图片的HTML背景

1 个答案: