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