具有不同重複背景的CSS

我已經做了一些Google搜索，並且無法阻止我的背景圖片重疊。我想要做的是有一個褪色的背景。但是，當漸變達到完全不透明時，我想應用不同的背景圖像，可以重複，因此無論div的長度多長，div看起來都完美無瑕。具有不同重複背景的CSS

我曾考慮過只爲每個網頁應用全長圖像，但我寧願讓這個工作，所以我不必擔心我可以應用到每個頁面的內容有多少。

#content_holder{ 
width:800px; 
height:1000px; 
background-image:url(../images/PC/content_top.png),url(../images/PC/content_bottom.png); 
background-position:0 0,0 240px; 
background-repeat:no-repeat,repeat-y; 
}

添加註意：高度表示1000px，這純粹是爲了測試的目的，因爲此時div是空的。

第二個圖像確實重複，但是從div的頂部開始與另一個圖像重疊。

這些圖像：

內容top.png一次演出後 Content Top 內容bottom.png重複內容的頂部 Content Bottom

請告訴我發生了什麼： enter image description here

來源

2013-10-30 Paul Ledger

#content_holder{ 
    width:800px; 
    height:1000px; 
    background-color:rgba(0,0,0,.65); 
    position: relative; 
    z-index: 2; 
    background: url(http://i.stack.imgur.com/j3THB.png) top left no-repeat, url(http://i.stack.imgur.com/35j7u.png) bottom left no-repeat; 
} 
#content_holder:before{ 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    top: 240px; 
    right: 0; 
    bottom: 0px; 
    left: 0; 
    background: url(http://i.stack.imgur.com/35j7u.png) top left repeat-y; 

}

解決它不完全確定一個完整的解釋，但它的作品發現this post，這是非常相似的我的。

JSFIDDLE

來源

2013-10-30 10:23:43

什麼剛刪除background-position並調整background-repeat：

background-repeat: repeat-x, repeat;

jsFiddle

編輯
嗯，多背景只是這樣工作。它是重疊的，因爲它下面的邊框具有完整的高度（重複）。背景沒有看到其他背景作爲邊界。爲頂級背景和一個底部的背景

做一個有單獨的元素boundry，這樣一個元素：你可以做兩件事情。
您可以編輯圖像，使過渡更平滑，因此你不能真正看到的邊界不重疊（半透明圖像，使平滑過渡容易）

來源

2013-10-30 09:23:22 nkmol

奇怪，當我嘗試使用圖像從jsfiddle它完美的作品，但是當我使用我的圖像它仍然重疊。 –

您可以上傳您使用的圖片，以便我們看到發生了什麼情況或上傳截圖？或者創建你自己的[jsFiddle]（http://jsfiddle.net/）^^ – nkmol

JS小提琴http://jsfiddle.net/qLszS/ –

一個激進而有效的方式來處理這個，如果你有一個已知的最大高度，你已經處於「：之前」：

&:before { 
    background: url('vertical-line.png') no-repeat 0px, 
       url('vertical-line-repeat.png') no-repeat 140px, 
       url('vertical-line-repeat.png') no-repeat 200px, 
       url('vertical-line-repeat.png') no-repeat 260px, 
       url('vertical-line-repeat.png') no-repeat 320px, 
       url('vertical-line-repeat.png') no-repeat 380px, 
       url('vertical-line-repeat.png') no-repeat 440px, 
       url('vertical-line-repeat.png') no-repeat 500px, 
       url('vertical-line-repeat.png') no-repeat 560px, 
       url('vertical-line-repeat.png') no-repeat 620px, 
       url('vertical-line-repeat.png') no-repeat 680px, 
       url('vertical-line-repeat.png') no-repeat 740px; 
}

來源

2017-08-10 12:00:49

具有不同重複背景的CSS

回答

相關問題