繁體中文当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 宽高自适应的九宫格背景图片切割分析
- 心得技巧
- 良好的网站用户界面所必须的8个特性
- 设计师挖掘客户需求设计:围观的就是你
- 设计观点:设计师领导力的培养
- 交互设计探讨:为什么需要在新窗口打开网页
- 程序员职业发展:如何作技术型领导
- 设计经验:谈谈web的默认字体
- 设计标志:28个餐饮和食品类网站的logo标志
- 用户体验设计涉及的几个用户研究设计讨论
- 设计规划在产品设计前期是非常最要的
- 用户体验:符合中国国情的网页链接新窗口打开
- 网站导航用户体验设计:选中状态是高亮还是灰色
- 更好的用户体验：过滤器(Filter)的搜索
- 产品设计:打动用户的产品需求
- 用电话进行用户访谈的几点事项
- 用户体验:用户行为研究
- 用户研究:与众不同的心理学
- 懂得项目管理的设计师在团队协作中的优势
- 交互设计理论:我们眼中的交互设计
- UE学习笔记：心智模型二分法探讨
- 利用简单的线条设计充满典雅风格的封面
心得技巧 中的 宽高自适应的九宫格背景图片切割分析
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 178 ::
收藏到网摘: n/a
在原来的宽高自适应的九宫格基础上做了一些优化，把八个背景图请求改为一个，以降低网络成本。其实这也只是一些简单的小技巧，在切图方面会比较严紧有1px的不对称就会出问题，请留意下面例子的切割分析。
RAR：module.zip
制作说明：
图片切割分析
重点在于使用局部透明的背景图，以及为每个自适应延伸的XHTML部分多添加一个<SPAN>标签读取背景，以错位的形式补上左右或上下的延伸背景。为解决IE未能高度100％问题，左右延伸高度写了3000px绝对值单位（根据需求调整）。
缺点：
背景图片必需透明所以不能使用JPG格式图片。（但愿有强人能解决这问题）
评论 (0) All
