左側重複的紋理和右側重複的紋理

我不知道該怎麼做，但我想要有2個重複的紋理，一個重複左側，另一個重複右側。左側重複的紋理和右側重複的紋理

代替：

#header { 
    background-image : Url('My_Two_Textures_Combined.png'); 
    background-repeat : repeat-x; /*Which repeats my joined textures a long the x axis*/ 
}

我想：

#header { 
    background-image : Url('My_Left_Texture'); 
    background-repeat : repeat-x-left; /*Which would ideally repeat my texture to the left on the x axis*/ 
    background-image : Url('My_Right_Texture'); 
    background-repeat : repeat-x-Right; /*Which would ideally repeat my texture to the right on the x axis*/ 
}

我希望有辦法做到這一點，因爲我認爲它會很好看在我的網站。我會試着看看其他的方式來做到這一點，比如使用僞命令或其他方法。如果我找到任何東西，我會在這裏發佈！

來源

2012-10-03 MithosAnnar

您可以使用像:before和:after這樣的css選擇器，並將您的背景放置在#header:before {}之一和#header:after {}之一。

來源

2012-10-03 15:32:39 Caelea

那麼你的意思是，我可以有一個重複一個x，然後一個重複的x，但在第一個重複之後？但是，我只會有一個紋理。最後呈現的那個，對嗎？ – MithosAnnar

你是否至少對谷歌有好奇心：之前和之後：意味着什麼？ – Caelea

對不起，我問了這麼簡單的問題。 – MithosAnnar

將兩個div的標題並排排列。每個都有自己的紋理。

來源

2012-10-03 15:34:12

正是我所想的:)。 – Nicholas

Downvote？解釋... –

+1。 '：之前'和'：之後'會很好地工作，但我喜歡使用2個div的簡單性。 –

：之前和之後是一個很好的解決方案，但你總是可以看看CSS3的多個背景。顯然，支持也有一點限制：> IE8，但這也可以做到這一點。

background-image: url(left.png), url(right.png); 
background-position: left bottom, right bottom; 
background-repeat: no-repeat;

來源

2012-10-03 15:35:08 carljwood

不錯的使用CSS3！我自己並不知道CSS3支持多種背景。涼。 – BeetleTheNeato

卡爾！我喜歡這樣的聲音，會嘗試:)乾杯！ – MithosAnnar

嘿卡爾你的作品也是！但是，我如何標記2個問題？ – MithosAnnar

，你可以做這樣的： http://jsfiddle.net/9V2vE/9/（更換背景顏色與圖片）

來源

2012-10-03 15:41:10 Nicholas

嗨，感謝您的幫助！這絕對是在正確的軌道上！我只是需要他們重複:) – MithosAnnar

如果它幫助你，請按複選框，如果你也想：頁。那麼你應該用下面的代替「背景顏色」： background-image：url（「path/of/image/image.png」）; background-repeat：repeat-x; //重複-Y; //重複; 很高興我能幫忙:) – Nicholas

左側重複的紋理和右側重複的紋理

回答

相關問題