两侧背景自动延伸的CSS实现方法 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> 两侧背景自动延伸的CSS实现方法

两侧背景自动延伸的CSS实现方法

浏览:2362次出处信息

方法来源于土豆网的导航，在这里纪录一下实现的思路。

主要是利用 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实现方法

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：用于打印的页面设计

后一篇：CSS设置字体大小 >>

文章信息

作者：摄氏度来源： Prower - 记录成长过程
标签：背景
发布时间：2010-02-23 22:12:24

建议继续学习

近3天十大热文