手机
当前位置:查字典教程网 >网页设计 >心得技巧 >宽高自适应的九宫格背景图片切割分析
宽高自适应的九宫格背景图片切割分析
摘要:在原来的宽高自适应的九宫格基础上做了一些优化,把八个背景图请求改为一个,以降低网络成本。其实这也只是一些简单的小技巧,在切图方面会比较严紧有...

在原来的宽高自适应的九宫格基础上做了一些优化,把八个背景图请求改为一个,以降低网络成本。其实这也只是一些简单的小技巧,在切图方面会比较严紧有1px的不对称就会出问题,请留意下面例子的切割分析。

RAR:module.zip

制作说明:

图片切割分析

宽高自适应的九宫格背景图片切割分析1

重点在于使用局部透明的背景图,以及为每个自适应延伸的XHTML部分多添加一个<SPAN>标签读取背景,以错位的形式补上左右或上下的延伸背景。为解决IE未能高度100%问题,左右延伸高度写了3000px绝对值单位(根据需求调整)。

缺点:

背景图片必需透明所以不能使用JPG格式图片。(但愿有强人能解决这问题)

【宽高自适应的九宫格背景图片切割分析】相关文章:

新鲜出炉的有用图标集25组 国外下载

固定、流动、弹性网页布局的利弊分析

写样式时背景色的声明的重要性

如何去掉图片作为超链接时出现的蓝色框框

html自适应表格的方法

Unicode签名BOM引发的事故原因分析

成功平面广告的“3I”标准

网页中内容显示过多如何从bottom快速回到top

自适应网页设计的方法(手机端良好的访问体验)

960 Grid System 基本原理及使用方法

精品推荐
分类导航