当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 宽高自适应的九宫格背景图片切割分析

心得技巧
网页设计心得:设计师理解搜索结果页SERP
网页搜索框内容为空的5种处理方式
搜索结果SERP设计:个性化会影响用户行为
网页设计心得:网页搜索框更像搜索框
注重用户体验:电子商务网站空搜索设计
用户体验:在什么时候设计网站确认页面
用户体验:网站确认页面以何种形式表现
用户体验:网站确认页面设计注意事项
应对极端并微小的错误的网页用户体验设计
基于Twitter的实时搜索引擎:Tweetfeel.com
用户体验设计:掩饰密码还是明文密码
用户体验:交叉销售和向上销售
网页底部的版权声明写法要注意
UCD设计师:挖掘商业价值纬度
论设计师的分工和配合
网站设计用色:色彩基本知识
参考:整理HTML,CSS和Javascript在线手册
何时慢的用户体验更好?
八个简单的图片设计技巧
产品设计师应该具备的几种能力

心得技巧 中的 宽高自适应的九宫格背景图片切割分析


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-10   浏览: 137 ::
收藏到网摘: n/a

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

RAR:module.zip

制作说明

图片切割分析

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

缺点

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