兩個背景圖像一開始在另一端

我有以下代碼，並希望實現類似下面的演示大綱。圖像顯示在div的頂部，當用戶垂直滾動時，其他圖像會重複顯示。兩個背景圖像一開始在另一端

但是，我想要顯示repeat.png究竟在哪裏stayontop.png垂直結束。我怎樣才能做到這一點？我嘗試了不同的background-position:center top, center bottom;變化，但沒有運氣。

編輯：由於背景圖像高度在auto模式（background-size:100% auto, 100% auto !important;），其基於所述靜態高度基準如background-position:center 50px;不幸工作在一個DIV寬度細的任何解決方案，但是，當用戶調整的div失敗。（實際上當另一個用戶訪問該網站時，使用具有不同分辨率的移動電話。）是否有動態地設置它？

- + - + - + - + - + - + -

stayontop.png

- + - + - + - + - + - + -

repat.png

- + - + - + - + - + - + -

repat.png

- + - + - + - + - + - + -

repat.png

- + - + - + - + - + - + -

.....

.hede{ 
    background: url("css/images/stayontop.png"), url("css/images/repeat.png"); 
    background-repeat:no-repeat, repeat-y; 
    background-position:center top, center bottom; 
    background-attachment: scroll, scroll; 
    background-size:100% auto, 100% auto !important; 
    min-height:100%; 
}

來源

2012-07-30 noway

不能指定一個'頂'爲沿着y軸重複的背景值，因爲它會向上和向下重複。現在兩個答案都應該可以工作。 – powerbuoy 2012-07-30 22:00:51

除了top,center和bottom之外，背景位置屬性接受長度值。所以，僅僅以像素爲單位指定stayontop.png結束：

background-position: center 200px;

設置使用JavaScript後臺位置每當窗口大小：

http://jsfiddle.net/gilly3/rKD8M/

onresize = resetBackgrounds; 
function resetBackgrounds() { 
    var els = document.querySelectorAll(".hede"); 
    for (var i = 0; i < els.length; i++) { 
     var h = els[i].clientWidth * aspectRatio; // must define aspectRatio 
     els[i].style.backgroundPosition = "center top, center " + h + "px"; 
    } 
}

來源

2012-07-30 22:11:00 gilly3

感謝Gilly3，它似乎是最簡單的解決方法，它在某些寬度下工作，但在用戶調整div時失敗。有沒有其他方法？我也更新了這個問題。 – noway 2012-07-30 22:35:36

@noway - 我用JavaScript方法更新了我的答案。任何能夠提出純粹CSS解決方案的人都會放棄我的帽子。 – gilly3 2012-07-30 23:01:45

謝謝，這太棒了！ – noway 2012-08-01 20:52:04

我想你只是需要確保該逗號圖像的高度與重複圖像的高度相同（或2倍，3倍，4倍高度），並且都對齊到頂部。

您還需要確保瀏覽器轉到您的網站支持多個背景圖像。

對於跨瀏覽器合規性，您可能最好使用兩個HTML元素。

來源

2012-07-30 21:58:46

感謝您的回答。這是一個很好的建議，但是，我的stayontop.png比repeat.png短近10倍，因此，對我的情況並沒有什麼幫助。 – noway 2012-07-30 22:33:26

的答案上面可能會是最好的解決辦法，但只是拋出另一個快速的想法英寸 http://jsfiddle.net/wigster/8FMB7/1/ 我不會正是這種形式使用它，但你的想法，通過位置2個背景頂部和底部它會創建所需的分割。

來源

2012-07-30 22:08:50

感謝您的答案亞歷山大，它工作在一定的寬度，但它失敗時，用戶調整div。有沒有其他方法？我也更新了這個問題。 – noway 2012-07-30 22:38:43

瀏覽器兼容性我會嘗試按以下順序的東西：

.hede{ 
     background: url("css/images/repeat.png"); 
     background-repeat:repeat-y; 
     background-position:center top; 
     background-size:100% auto; 
     min-height:100%; 
     margin-top: 20px; // assumed height of stayontop.png 
    } 
    .hede:before { 
     content: url("css/images/stayontop.png"); 
     height: 20px; 
     margin-top: -20px; 
    }

您可能需要調整一下代碼，但它應該是可能的...

編輯： 改變在這之前，css可能會解決調整大小問題：

.hede:before { 
    content: url("css/images/stayontop.png"); 
    height: 20px; 
    display: block; 
    margin: -20px auto 0; 
}

不完全確定，但它的工作試試...

來源

2012-07-30 22:09:35 Pevara

謝謝你的回答，它工作在一定的寬度，但當用戶調整div的大小時會失敗。有沒有其他方法？我也更新了這個問題。 – noway 2012-07-30 22:38:02

嘗試將圖像置於：之前，請參閱我的編輯 – Pevara 2012-08-02 18:12:03

兩個背景圖像一開始在另一端

回答

相關問題