帶有重複的背景圖像必須在有其他背景圖像時停止

我的網站的內容div具有各種圖層樣式的獨特背景。在HTML/CSS中，我可以從Photoshop中獲取背景並將其用作背景圖像。我的問題是內容div的高度是可變的。爲了解決這個問題，我把頂部像素設置在頂部，中心有一個像素行，它有一個repeat-y和底部像素，並將它們放在底部。這可以工作，但中間背景圖像必須在頂部背景圖像之後和底部背景圖像之前開始。帶有重複的背景圖像必須在有其他背景圖像時停止

div#content{ 
    background: url('contentbghead.png') top center no-repeat, 
       url('contentbgfoot.png') bottom center no-repeat, 
       url('contentbgmid.png') 0px 10px repeat-y; 
    width:680px; 
    height:300px; 
}

我的結果可以在這裏找到：http://tinypic.com?ref=30muazs

來源

2012-04-23 yoeriboven

這是一個CSS3的交易，不是所有的瀏覽器都支持...很抱歉地說，但它的將是針對特定瀏覽器，否則會失敗的所有參數，除了第一個或最後一個...有時... – Relic 2012-04-23 22:23:54

多背景並不在CSS2的支持。你需要多個div來實現你要找的東西。

您還可以看看一些CSS3方法多背景的：

Multiple Backgrounds with CSS3

這種方法，然而，這並不在IE的版本比IE9工作老。

來源

2012-04-23 20:44:10 magzalez

沒有三個div的CSS3不可能嗎？ – yoeriboven 2012-04-23 21:45:20

正確，但如上文所述，Relic尚未在所有瀏覽器上運行。如果您發佈圖片和/或其他代碼，我們可能會更好地幫助您。 – magzalez 2012-04-23 22:32:36

只有多個背景，這是不可能的，因爲每個背景條目與另一個背景條目沒有關係。

div#content{ 
    position:relative; 
    background: url('contentbghead.png') top center no-repeat, 
       url('contentbgfoot.png') bottom center no-repeat; 
    width:680px; 
    height:300px; 
} 
div#content:before { 
    content:"\0020"; font-size:0px; 
    display:block; position:absolute; top:10px; left:0px; bottom:10px; 
    width: /* Whatever your BG's width is */; 
    background:transparent url('contentbgmid.png') repeat-y left top; 
    pointer-events:none; 
}

您將要採取的z-index層次感的預防措施，因爲它可能僞元素可能捕獲點擊事件，如果它是你的內容上面分層（用於瀏覽器：但是，你可以使用僞元素達到這種效果不支持指針事件）。

來源

2012-04-23 22:22:00 rgthree

嗨，你可以使用實現你的結果：和前：後CSS僞元素。

我已經做了一個代碼只有一個股利，並使用你的所有三個圖像在一個股利和中期圖像也是可重複的y軸。

注意：和前：後 * 僞元素 *支持直到IE-8

HTML

<div id="content"> 
Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content Dummy Content 
</div>

CSS

#content:after { 
    background: url("http://i.imgur.com/5agws.png") no-repeat 0 0; 
    content: " "; 
    height: 50px; 
    left: 0; 
    position: absolute; 
    width: 680px; 
} 

#content:before { 
    background: url("http://i.imgur.com/P7jL5.png") no-repeat 0 0; 
    content: " "; 
    height: 50px; 
    position: absolute; 
    top: -50px; 
    width: 680px; 
} 

#content { 
    background: url("http://i.imgur.com/vAqRU.png") repeat-y 0 0; 
    color: white; 
    position: relative; 
    top: 50px; 
    width: 680px; 
    white-space: pre-wrap; 

}

看到更好的理解演示： - http://jsfiddle.net/5Lkmr/40/

來源

2012-04-24 07:43:04

我認爲這是一個相當乾淨的解決方案，尤其是當需要支持IE8時。這可以用於固定左右圖像的水平重複嗎？ – ProgramCpp 2015-06-30 06:16:34

帶有重複的背景圖像必須在有其他背景圖像時停止

回答

相關問題