两侧背景自动延伸的CSS实现方法
浏览:2299次 出处信息
方法来源于土豆网的导航,在这里纪录一下实现的思路。
主要是利用 position 属性的 absolute 和 relative 配合 z-index 来实现的,通过position:absolute将需要平铺的背景层叠在另一背景上,这样即可以实现同一位置的两个背景,再使用z-index将内容提升到最高阶显示。
以下是代码片段: <div id=”a”> <div id=”b”> <ul> <li><a href=”http://www.prower.cn/category/internet”>互联网谈</a></li> <li><a href=”http://www.prower.cn/category/interaction”>交互设计</a></li> <li><a href=”http://www.prower.cn/category/technic”>技术言论</a></li> </ul> <div id=”c”></div> </div> <div id=”d”></div> </div> |
首先将其中一个背景样式写在<div id=”a”>上,然后是将另一个背景样式写在<div id=”d”>上,<div id=”b”>为内容层,<div id=”c”>是另一个背景样式层,可以自由的出现在<div id=”b”>里面的任何一个位置。如土豆网中间的那个有弧线的背景。
然后是样式方面:
以下是代码片段: #a {background:#f00; height:50px; position:relative; width:100%;} #b {height:50px; margin:0 auto; position:relative; width:950px; z-index:9000;} #c {background:#ff0; height:50px; position:absolute; left:100px; top:0; width:100px; z-index:-1;} #d {background:#f60; height:50px; position:absolute; left:0; top:0; width:50%; z-index:1;} ul {line-height:50px; position:relative; z-index:9001;} |
具体代码参见:两侧背景自动延伸的CSS实现方法
建议继续学习:
- 浏览器对居中的背景图片的兼容性 (阅读:2701)
- 一张背景实现自适应九宫格 (阅读:2490)
- 缩小窗口<body>背景被裁掉 (阅读:2316)
- 渐变背景上的内容垂直居中 (阅读:2202)
- 一个标签应用三个背景图片 (阅读:2185)
- 消失的列表背景 (阅读:2022)
- 改善IE6中a与a:hover的背景支持 (阅读:1925)
- 页面元素的背景及boder被裁掉 (阅读:1837)
- 无缝背景的推荐 (阅读:1829)
- CSS Gradient详解 (阅读:1209)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
文章信息
- 作者:摄氏度 来源: Prower - 记录成长过程
- 标签: 背景
- 发布时间:2010-02-23 22:12:24
建议继续学习
近3天十大热文
- [132] 招聘技巧一二
- [15] Linux常用系统信息查看命令
- [13] 最近总结的一些技巧(vim,python,s
- [12] 关于Linux的文件系统cache
- [12] Redis和Memcached的区别
- [12] 在FreeNAS/BSD搭建基于Nginx+
- [11] 个人开公司的流程,以后用得着
- [10] 每个程序员都应该知道的8个Linux命令
- [10] ps - 按进程消耗内存多少排序
- [10] 我对技术方向的一些反思