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

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

RAR:module.zip

制作说明:

图片切割分析

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

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

缺点:

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

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

如何设计制作自适应网页

网页宽度自动适应手机屏幕宽度的实现代码(viewport)

博客园CnBlogs自定义博客样式分享

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

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

25种提高网页加载速度的方法和技巧

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

对淘宝网站的宝贝详情描述页页面设计的分析与看法(图)

html自适应表格的方法

PC端和移动端自适应问题的快速解决方法

精品推荐
分类导航