偶看新闻杭州第一制药厂:DIV+CSS+一张图片实现可自动伸缩高度的漂亮的背景框（兼容IE/FF等） - 原创 -...
来源：百度文库 编辑：偶看新闻 时间：2024/05/06 01:24:14
【favii原创】
很多时候，在编写网页时，为了美观，希望使用图片背景来实现圆角等漂亮的效果；同时，又希望能够有一个能自动根据内容多少来自动适应高度的背景框，以避免重复劳动。自动适应宽度变化的，网上有不少，这里提供一个自动适应高度的，并且，为了提高加载效率，只使用了一张背景图片。缺陷：宽度固定，如要改变，需要更改背景图片。
效果展示示意图：
先看背景图片：440X50
/*CSS代码内容：根据内容多寡自动伸缩高度*/
.ali1_head{margin:0 auto;width:220px;height:35px;background:url(../images/hgj/ali1bg.gif);text-align:left;
overflow:hidden;}
.ali1{margin:0 auto;width:220px;background:url(../images/hgj/ali1bg.gif) -220px 0 repeat-y;overflow:hidden;}
.ali1_foot{margin:0 auto;width:220px;height:15px;background:url(../images/hgj/ali1bg.gif) 0 -35px;}
html部分代码：
这里是框里的内容
想改变宽度的，需要更改图片，并相应调整CSS中的背景偏移数值。
很多时候，在编写网页时，为了美观，希望使用图片背景来实现圆角等漂亮的效果；同时，又希望能够有一个能自动根据内容多少来自动适应高度的背景框，以避免重复劳动。自动适应宽度变化的，网上有不少，这里提供一个自动适应高度的，并且，为了提高加载效率，只使用了一张背景图片。缺陷：宽度固定，如要改变，需要更改背景图片。
效果展示示意图：
先看背景图片：440X50
/*CSS代码内容：根据内容多寡自动伸缩高度*/
.ali1_head{margin:0 auto;width:220px;height:35px;background:url(../images/hgj/ali1bg.gif);text-align:left;
overflow:hidden;}
.ali1{margin:0 auto;width:220px;background:url(../images/hgj/ali1bg.gif) -220px 0 repeat-y;overflow:hidden;}
.ali1_foot{margin:0 auto;width:220px;height:15px;background:url(../images/hgj/ali1bg.gif) 0 -35px;}
html部分代码：
这里是框里的内容
想改变宽度的，需要更改图片，并相应调整CSS中的背景偏移数值。
CSS+DIV?
div+css怎样入门？
关于css定义div
div+css 问题？
关于cms div+css
DIV+CSS的问题?
Div+CSS布局
javascript和css问题：两div栏的高度能自动相等吗？
怎样在一张图片实现图片变换?
如何将图片放入CSS文件.实现个性化的效果
div+css定义下拉菜单的问题
关于DIV与CSS的显示问题
DIV＋CSS网页新标准制作网页
css和DIV怎么用啊？
采用DIV+CSS布局的好处
采用DIV+CSS布局的好处
Div+css为什么利于搜索引擎的收录
怎么使用DIV+CSS布局网页
css div网页设计的问题
css div网页设计的问题
问一个CSS+DIV的问题
哪种css定义是兼容性最高的? (div+css)
div拖动效果如何实现
如何实现DIV代替表格