当前位置：首页 → 问答吧 → 这样不规则的背景，如何实现自适应高度？

这样不规则的背景，如何实现自适应高度？

时间：2010-09-01

来源：互联网

如图所示，背景是渐变，因此上面图形的图片要用透明背景。不知如何实现把这个图形做成自适应高度？

我想分为上中下三个div，可是盒子里面还要放内容的，内容无论放在上、中还是下的div都不合适，这就是我不知该如何解决的地方。请高手相助。

[ 本帖最后由 trickman 于 2010-9-1 09:28 编辑 ]

作者: trickman 发布时间: 2010-09-01

HTML放蓝色渐变
BODY放中间淡黄色repeat-y
上标签上淡黄上半不规则图
上标签放淡黄下半不规则图

作者: radom 发布时间: 2010-09-01

中间也不规则，你怎么repeated呢？

作者: xmlovedoudou 发布时间: 2010-09-01

中间有块区域是规则的您老没发现嘛

HTML放蓝色渐变
BODY放中间淡黄色repeat-y（取透明PNG24）
上标签上淡黄上半不规则图（取透明PNG24）
上标签放淡黄下半不规则图（取透明PNG24）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=uft-8">
<title></title>
<style type="text/css">
html{background:url(images/png_02.png) repeat-x;}
body{width:438px;background:url(images/png_08.png) repeat-y;margin:10px auto}
.con1{background:url(images/png_05.png) no-repeat;width:438px;height:230px;}
.con3{background:url(images/png_10.png) no-repeat;width:438px;height:151px;}
</style>
</head>
<body>
<div class="con1"></div>
<div class="con2"></div>
<div class="con3"></div>
</body>
</html>
改改样式取一透明图片就行了吧！

[ 本帖最后由 radom 于 2010-9-1 13:08 编辑 ]

附件

QQ截图未命名.png (35.93 KB)

2010-9-1 13:08

作者: radom 发布时间: 2010-09-01

谢谢几位的回答。

你们提供的方案实现了自适应高度。可是没有考虑内容如何放置的问题。

例如 radom提供的方案中，我应该吧内容放到哪个标签呢？如果放在con1、con2或是con3中的一个，那么势必另两个就是空白，而且空白的区域比较大。这是让我头疼的症结所在。

作者: trickman 发布时间: 2010-09-01

你这图本来就没给内容，谁知道放哪里。另外按照radom的布局来看，cont1和cont3当然是拿来放置高度固定的内容的，应该分别是header和footer，cont2是content吧。实际上按照你的要求和这张图，怎么看起来都感觉头部和底部的部分占的页面内容太多，谁设计的？

作者: xmlovedoudou 发布时间: 2010-09-01

不好意思我没有说清楚，图中的区域都是要放内容的。这个不规则图形就是内容的背景。至于设计是客户提供的，还要求自适应高度。

我想，也许可以用滑动门来实现。上面做一个图片，到可以延伸的地方把图片延长。下面也一样。我尚未动手实践，请大家看看此法是否可行。

作者: trickman 发布时间: 2010-09-01

滑动门的原理是针对比较规则的图形的，楼主这样滴不行吧。这图实在是不规则。另外楼主你要求的高度自适应到底是怎么回事，也就是说当内容的高度大于背景图片时，图片的形状是怎么样的，这个你得讲清楚。

作者: xmlovedoudou 发布时间: 2010-09-01

部分支持 radom！
但需要嵌套
<div class="con">
<div class="con_top">
<div class="con_bottom"></div>
</div>
</div>
con背景图就是4楼的中间规则部分用repeat-y
另外两个就是它的头部跟底部图片
con,con_top是自适应的，只有con_bottom是有最小高度的即楼主的原图高度

作者: sfzheng2007 发布时间: 2010-09-01