在第一個圖像下重複第二個背景圖像

我試圖在一個<div>圖層中使用background-image的兩個實例。第一個background-image（部分透明）應顯示在<div>的top，第二個應直接顯示在第一個background-image（此作品）下。在第一個圖像下重複第二個背景圖像

應有的動態內容與高度爲1px的第二張圖片應垂直重複（repeat-y），並在第一張background-image下開始重複。我的問題是，當我嘗試重複第二個background-image它在整個<div>層上重複。

.mainFrameRoundBorder { 
    border: none; 
    background: url(../images/theme_box_main_l.png), url(../images/theme_box_main_2.png); 
    background-repeat: no-repeat, repeat-y; 
    border-radius: 0 0 0 0; 
    box-shadow:0 0 0 0; 
    background-attachment: scroll; 
    background-clip: border-box; 
    background-color: transparent; 
    background-position: center top, 0px 364px; 
    margin-top:10px; 
    padding: 6px 15px; 
    overflow: hidden; 
    color: #FFFFFF; 
}

來源

2012-01-08 user1137236

請發表小提琴...您的描述不是很明確。 – pixelass 2012-01-08 16:17:40

對不起，你是什麼意思與小提琴？ – user1137236 2012-01-08 17:15:29

http://jsfiddle.net使用此服務來製作一個代碼的小例子。我在這裏爲你開始了一個：http://jsfiddle.net/pixelass/E9Xbu/ – pixelass 2012-01-08 17:33:43

我會建議使用：之前或之後：僞選擇器。您可以像往常一樣將重複背景放在div上，然後將非重複背景放在僞選擇器元素中。

本教程應該能夠給你這個方法一些好的指針：

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

來源

2012-01-08 16:20:59 mbxtr

這通常工作，我的問題是，頂部的圖片是部分透明的，所以後面的重複圖像會閃閃發光。 – user1137236 2012-01-08 16:53:01

那麼你是說你想要第二個圖像重複，但只有在第一個圖像開始後纔開始重複？ – mbxtr 2012-01-09 16:27:21

差不多，我想第二個圖像開始重複，當第一個圖像結束。例如第一個圖像的高度爲300px，第二個圖像的高度爲50px。 Div具有500px的高度，第二個圖像應該在300px之後開始重複（在第一個圖像下），在這個計算中它應該重複4次。我現在擁有的是重複10次（也是在第一張圖片後面重複）。 – user1137236 2012-01-10 15:35:44

我會建議你使用z-index

來源

2012-01-08 19:09:40

在第一個圖像下重複第二個背景圖像

回答

相關問題