繁體中文当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 宽高自适应的九宫格背景图片切割分析
- 心得技巧
- 怎样使你的网站设计变得简洁？
- 设计心态:设计师不喜欢的薪资待遇
- 设计参考:国外34个木纹素材网站设计实例
- 设计理论：文字的辨识度与可读性
- 用图片实现超级链接的个性化下划线
- 设计理论：文本达意和可用性
- 设计理论设计中的层次感
- 网页的栅格设计思考
- 网页图片快速显示的方法和技巧
- 推荐60种分页案例和好的实践
- 分页案例和好的实践
- 设计体验:按钮上的内容
- 设计故事:记不住车牌的保安
- 设计联想:为何找错了地方？
- 整理了几个自己认为不错的设计酷站
- 设计心得:我们猜您会喜欢
- 设计理论:为何找错了地方？
- Discuz! 论坛如何添加配置选项
- 豆瓣网站关于网站内容小改动的方法
- 将来会比较流行的几种导航的方向
心得技巧 中的 宽高自适应的九宫格背景图片切割分析
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 113 ::
收藏到网摘: n/a
在原来的宽高自适应的九宫格基础上做了一些优化，把八个背景图请求改为一个，以降低网络成本。其实这也只是一些简单的小技巧，在切图方面会比较严紧有1px的不对称就会出问题，请留意下面例子的切割分析。
RAR：module.zip
制作说明：
图片切割分析
重点在于使用局部透明的背景图，以及为每个自适应延伸的XHTML部分多添加一个<SPAN>标签读取背景，以错位的形式补上左右或上下的延伸背景。为解决IE未能高度100％问题，左右延伸高度写了3000px绝对值单位（根据需求调整）。
缺点：
背景图片必需透明所以不能使用JPG格式图片。（但愿有强人能解决这问题）
评论 (0) All
