一张背景实现自适应九宫格
浏览:2491次 出处信息
在原来的宽高自适应的九宫格基础上做了一些优化,把八个背景图请求改为一个,以降低网络成本。其实这也只是一些简单的小技巧,不过在切图方面会比较严紧有1px的不对称就会出问题,请留意下面例子的切割分析。
DEMO: http://blog.gulu77.com/demo/200808/module.html
DEMO2: http://blog.gulu77.com/demo/200808/module2.html
RAR: http://blog.gulu77.com/demo/200808/module.rar
制作说明:
图片切割分析
重点在于使用局部透明的背景图,以及为每个自适应延伸的XHTML部分多添加一个标签读取背景,以错位的形式补上左右或上下的延伸背景。为解决IE未能高度100%问题,左右延伸高度写了3000px绝对值单位(根据需求调整)。
缺点:
背景图片必需透明,所以不能使用JPG格式图片。(但愿有强人能解决这问题)
建议继续学习:
- 浏览器对居中的背景图片的兼容性 (阅读:2704)
- 缩小窗口<body>背景被裁掉 (阅读:2317)
- 两侧背景自动延伸的CSS实现方法 (阅读:2303)
- 渐变背景上的内容垂直居中 (阅读:2205)
- 一个标签应用三个背景图片 (阅读:2188)
- 消失的列表背景 (阅读:2025)
- 改善IE6中a与a:hover的背景支持 (阅读:1928)
- 页面元素的背景及boder被裁掉 (阅读:1840)
- 无缝背景的推荐 (阅读:1830)
- CSS Gradient详解 (阅读:1211)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:IE5至IE7读取不了4095行以后的CSS
后一篇:IE6支持PNG透明(alpha通道)的4种方法 >>
文章信息
- 作者:Gulu77 来源: Gulu77
- 标签: 九宫格 背景
- 发布时间:2009-11-08 23:01:44
建议继续学习
近3天十大热文
- [682] Go Reflect 性能
- [24] 正态分布的前世今生(一)
- [15] Cuckoo Filter:设计与实现
- [15] rsync同步的艺术
- [13] Linux Used内存到底哪里去了?
- [13] 关于RDS只读实例延迟分析
- [13] 深入浅出选择类排序算法(简单选择排序,堆排序
- [12] 什么是DNS劫持和DNS污染?
- [11] Android用户界面设计:表格布局
- [11] vim入门,进阶与折腾