在 CSS 中创建 2 层背景图像

Question

我在解决这个问题时遇到了一些麻烦。

我想要一个实心的红色条（大约 200 像素宽）运行整个页面的长度。我已经使用了在 Y 上重复的 200x1px 小图像。

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

我不确定如何着手制作这张 "Second" 壁纸。

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

Answer 1

听起来您希望网站上有两个背景图片。使用 css 中的背景图像，用逗号分隔每个图像。所以它看起来像：

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

}

你可以了解更多here。

Answer 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。

在 CSS 中创建 2 层背景图像

Creating a 2 layer background image in CSS

css

background

image

wallpaper