一张背景实现自适应九宫格
浏览:2470次 出处信息
在原来的宽高自适应的九宫格基础上做了一些优化,把八个背景图请求改为一个,以降低网络成本。其实这也只是一些简单的小技巧,不过在切图方面会比较严紧有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格式图片。(但愿有强人能解决这问题)
建议继续学习:
- 浏览器对居中的背景图片的兼容性 (阅读:2683)
- 缩小窗口<body>背景被裁掉 (阅读:2297)
- 两侧背景自动延伸的CSS实现方法 (阅读:2281)
- 渐变背景上的内容垂直居中 (阅读:2179)
- 一个标签应用三个背景图片 (阅读:2165)
- 消失的列表背景 (阅读:2007)
- 改善IE6中a与a:hover的背景支持 (阅读:1906)
- 页面元素的背景及boder被裁掉 (阅读:1821)
- 无缝背景的推荐 (阅读:1814)
- CSS Gradient详解 (阅读:1188)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:IE5至IE7读取不了4095行以后的CSS
后一篇:IE6支持PNG透明(alpha通道)的4种方法 >>
文章信息
- 作者:Gulu77 来源: Gulu77
- 标签: 九宫格 背景
- 发布时间:2009-11-08 23:01:44
建议继续学习
近3天十大热文
- [11] 解决 ubuntu 的 /etc/hosts
- [10] 文言文白话文互转:文言文转白话文(现代文),
- [9] 用邻接表实现无向图
- [9] Http/2知识图谱
- [9] 一个 VLA (可变长度数组)的实现
- [8] 领导需要比下属更懂技术吗?
- [7] 为什么数组标号是从0开始的?
- [7] 近场通信 vs. 低功耗蓝牙:如何抉择
- [7] 新手产品经理都混哪里
- [7] arduino-蓝牙各种版本类型及费用对比