用css多重背景，只重複一個背景

需要一些CSS背景重複的幫助。下面是我試圖實現的功能的線框。用css多重背景，只重複一個背景

enter image description here

目前代碼：

HTML：

<div class="wrapper"> 
    <div class="container"></div> 
</div>

CSS：

.container{ 
    min-height: 10000px; 
    background-image: url(background1.png), url(background2.png); 
    background-repeat: no-repeat, repeat-y; 
    background-position: center top, center 1000px; 
}

當前的代碼顯示background1只是一個時間和重複background2，我想，但background2圖像從頁面頂部開始。我希望它在background1圖像結束後正好開始，如線框中所示。

注意：圖像background1和background2都具有透明形狀，這使得其他圖像在背景中可見。

來源

2015-01-12 Abhay Desai

你的意思是background2從頁面底部開始，因爲你在CSS中聲明瞭「bottom」？ – BoltClock

bottom只是一個嘗試，我希望它在background1圖像結束後正好開始。@ BoltClock –

您需要一個僞元素 – vals

如果你設置背景重複，它不能是有限（據我所知）

的解決辦法是將其限制在一個僞元素，並限制這個僞元素，你想讓它（與頂部屬性）

.test { 
 
    width: 300px; 
 
    height: 600px; 
 
    border: solid black 1px; 
 
    position: relative; 
 
} 
 

 
.test:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 200px; 
 
    background-image: url(http://placekitten.com/g/600/400); 
 
    background-repeat-y: repeat; 
 
}

<div class="test"></div>

需要注意的是100％的高度是不準確的，如果你希望它是準確的設置到您的維度

來源

2015-01-12 17:23:50 vals

感謝它的工作！ :) –

用css多重背景，只重複一個背景

回答

相關問題