在 CSS 中创建 2 层背景图像 [重复]答案

【问题标题】：Creating a 2 layer background image in CSS [duplicate]在 CSS 中创建 2 层背景图像 [重复]
【发布时间】：2015-11-11 21:06:38
【问题描述】：

我很难理解这个问题。

我希望有一个实心红色条（大约 200 像素宽）贯穿整个页面。我已经在 Y 上使用了一个 200x1px 的小图像。

然后我想在这个红色条的顶部放置另一个图像，它将始终固定在页面上的特定位置。

我不知道如何创建这个“第二”壁纸。

我希望这是有道理的。谢谢。

【问题讨论】：

标签： css image background wallpaper

【解决方案1】：

从听起来你想要在你的网站上的两个背景图片。使用 css 中的背景图像，用逗号分隔每个图像。所以它看起来像：

#background{
    background-image: url(image1.jpg), url(image2.jpg);

}

您可以了解更多here。

【讨论】：

【解决方案2】：

您可以使用 CSS3 指定多个背景。列出的第一个背景将显示在顶部，每个背景都可以有自己的重复和位置设置。

请参阅example at 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;
  
}

注意使用多个背景的browser compatibility。

【讨论】：

这绝对是奇迹！！！我不知道你可以像这样简单地堆叠背景图像，谢谢！