Question

基本上我的目标是将我的页面内容div封装在一个圆角矩形中。有点像这样：

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

那么页面内容部分可以只要我需要并保留圆形矩形。我只是不确定这样做的最好方法。我尝试将img添加到pagecontent div的顶部，但透明区域被pagecontent的背景覆盖。感谢

Answer 1

着名的Sliding Doors技术可能就是您所需要的。您可能需要添加一个额外的重复图像，以使其无限长。

Answer 2

如果我理解你的意思，你应该将顶部和底部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>
}

无限长的圆形矩形

2 个答案: