在CSS中创建一个2层背景图像

Question

我在绕过这个过程中遇到了一些麻烦。

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

重复，然后我想让另一个图像坐在这个红色条的顶部，它会一直固定在页面上的特定位置。

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

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

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。