無限長圓的矩形

基本上我的目標是將我的頁面內容div封裝在一個圓形的矩形中。的排序是這樣的：無限長圓的矩形

Top of round rect (White) 
Page content (uses a white rectangular css background) 
Bottom of round rect(White)

那麼接下來的頁面內容部分可以，只要我需要，並保留圓矩形形狀。我只是不確定最好的方式來做到這一點。我嘗試添加一個img到pagecontent div的頂部，但透明區域被pagecontent的背景覆蓋。謝謝

來源

2010-01-05 jmasterx

我認爲這是已經在DOCTYPE。 com http://doctype.com/infinitly-long-round-rectangle – 2010-01-05 16:20:50

我沒有得到答案，我在Google上找不到任何答案 – jmasterx 2010-01-05 16:21:35

如果我明白你的意思，你應該把頂部和底部的div內容的div之外：

<html> 
<div id=top>&nbsp;</div> 
<div id=middle> 

... insert page content ... 

</div> 
<div id=bottom>&nbsp;</div> 
</html>

，然後在CSS

#top { 
background : url("top.png") no-repeat bottom center; 
height : <height of image in pixels>px; 
padding : 0; 
margin: 10px auto 0 auto; 
width:<required width> 
} 

#middle { 
background : url("middle.png") repeat-y top center; 
padding : 0; 
margin: 0 auto 0 auto; 
width:<required width> 
} 

#bottom { 
background : url("bottom.png") no-repeat top center; 
height : <height of image in pixels>px; 
padding : 0; 
margin: 0 auto 10px auto; 
width:<required width> 
}

來源

2010-01-05 16:39:38

着名的Sliding Doors技術可能是你所需要的。您可能需要添加一個額外的重複圖像，以使其無限長。

來源

2010-01-05 16:21:19

無限長圓的矩形

回答

相關問題