一张背景实现自适应九宫格
浏览:2490次 出处信息
在原来的宽高自适应的九宫格基础上做了一些优化,把八个背景图请求改为一个,以降低网络成本。其实这也只是一些简单的小技巧,不过在切图方面会比较严紧有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格式图片。(但愿有强人能解决这问题)
建议继续学习:
- 浏览器对居中的背景图片的兼容性 (阅读:2701)
- 缩小窗口<body>背景被裁掉 (阅读:2316)
- 两侧背景自动延伸的CSS实现方法 (阅读:2298)
- 渐变背景上的内容垂直居中 (阅读:2201)
- 一个标签应用三个背景图片 (阅读:2185)
- 消失的列表背景 (阅读:2022)
- 改善IE6中a与a:hover的背景支持 (阅读:1924)
- 页面元素的背景及boder被裁掉 (阅读:1836)
- 无缝背景的推荐 (阅读:1828)
- CSS Gradient详解 (阅读:1209)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:IE5至IE7读取不了4095行以后的CSS
后一篇:IE6支持PNG透明(alpha通道)的4种方法 >>
文章信息
- 作者:Gulu77 来源: Gulu77
- 标签: 九宫格 背景
- 发布时间:2009-11-08 23:01:44
建议继续学习
近3天十大热文
- [363] 招聘技巧一二
- [14] linux内核研究笔记(一)内存管理 – p
- [13] 个人开公司的流程,以后用得着
- [10] ps - 按进程消耗内存多少排序
- [10] DBA有什么个人前途?
- [10] 我的程序员之路
- [10] DBA最缺的不是技术
- [9] 关于大学学习,说说我的一些体会
- [9] oracle技术方面的路线
- [9] 30分钟3300%性能提升――python+