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

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

RAR:module.zip

制作说明:

图片切割分析

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

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

缺点:

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

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

html自适应表格的方法

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

DIV建站、Table建站以及XHTML建站的区别分析说明

33款冰雪字体整理推荐下载(个人与商业)

新手建站入门教程 建站需要的条件和工具

怎样让一个div高度自适应浏览器高度

让网站图片生成灰色效果的三种方法

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

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

自适应网页设计是怎么做到的的相关知识点总结

精品推荐
分类导航