提问人：level42 提问时间：8/19/2015 更新时间：8/19/2015 访问量：694
在 CSS 中创建 2 层背景图像 [副本]
Creating a 2 layer background image in CSS [duplicate]
问：
我很难解决这个问题。
我希望有一个实心红色条（约 200px 宽）贯穿整个页面。我已经在 Y 上重复使用了一张 200x1px 的小图像。
然后，我希望将另一张图像放在这个红色条的顶部，该图像将始终固定在页面上的特定位置。
我不确定如何创建这个“第二”壁纸。
我希望这是有道理的。谢谢。
答：
2赞
pormus
8/19/2015
#1
从听起来看，您希望在您的网站上提供两张背景图片。在 css 中使用 background-image，用逗号分隔每个图像。所以它看起来像：
#background{
background-image: url(image1.jpg), url(image2.jpg);
}
您可以在此处了解更多信息。
1赞
showdev
8/19/2015
#2
您可以使用 CSS3 指定多个背景。列出的第一个背景将显示在顶部，每个背景都可以有自己的重复和位置设置。
有关进一步参考，请参阅 developer.mozilla.org 中的示例。
演示如下：
body {
background-image: url('http://lorempixel.com/100/100/abstract/3/'),
url('http://lorempixel.com/200/1/abstract/2/');
background-repeat: no-repeat,
repeat-y;
background-position: 50px 20px,
top left;
}请注意使用多个背景的浏览器兼容性。
评论
0赞
level42
8/19/2015
这绝对是奇迹!!我不知道你可以简单地像这样堆叠背景图片，谢谢！
评论