與CSS 3種不同的背景

我想知道如果以下是可能的CSS。與CSS 3種不同的背景

我想在那裏有3個橫條橫跨背景的整個寬度。這裏是我想要的背景粗略模型 enter image description here

我一直在玩弄以下，但我似乎無法定位任何背景。

#blog { 
width: 1200px; 
height: 100%; 
background-image: url("bg1.png"), 
      url("bg2.png"), 
      url("bg3.png"); 
background-position: 10px 10px, 
      170px 10px, 
      750px 10px; 
background-repeat:repeat-x; 
}

這裏有一個小提琴：http://jsfiddle.net/5fo054L2/1/

任何想法，我做錯了嗎？

來源

2014-10-16 mango

你只能有一個'background-image'。但是你可以將它們組合成一個圖像：P或者使用漸變，因爲它只是顏色 – 2014-10-16 23:40:57

補充它。喜歡你的評論，但不能不像它。我忘記了自css3以來你實際上可以擁有多個背景圖像。 – Felk 2014-10-16 23:45:20

CSS看起來不錯，請張貼一些實際的代碼（也許是小提琴），所以我們可以解決實際問題 – Felk 2014-10-16 23:48:02

您還可以製作三個圖像文件，將它們放在其他所有位置下，並使用絕對定位進行設置。

來源

2014-10-17 00:35:06 dhc

你幾乎擁有它。問題是你有x和y的位置混淆。另外，x位置如果重複則沒有任何意義。

.blog { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url("http://i.imgur.com/L3F9slr.png"), url("http://i.imgur.com/rmPDxMq.png"), url("http://i.imgur.com/9MMzDMs.png"); 
 
    background-position: 0px 170px, 0px 100px, 0px 10px; 
 
    background-repeat: repeat-x; 
 
}

這裏是一個更新的jsfiddle：http://jsfiddle.net/5fo054L2/3/

注意，（在你的示例文本）的垂直高度會限制你看到的背景圖片的數量。

來源

2014-10-17 00:35:47 kevintechie

小提琴不顯示背景。。。 – 2014-10-17 00:39:52

你使用什麼瀏覽器？代碼依賴於擁有支持CSS3的瀏覽器。當你查看OP的jsfiddle時，你看到了什麼？ – kevintechie 2014-10-17 00:43:34

我使用chrome 39測試版。我看到了文字，但根本沒有BG。 – 2014-10-17 00:44:47

與CSS 3種不同的背景

回答

相關問題