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

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

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

reeoo.com - web design inspiration

11 Comments

  1. willerce说道:

    给个图吧,我没看明白意思。

  2. 冰剑说道:

    基本看明白意思了,刚开始也没有看懂!呵呵

  3. 阿泽说道:

    嘿嘿,过来学习一下!~

  4. verypeople说道:

    不错 谢谢分享啊

  5. shoe-store说道:

    个背景样

  6. sky说道:

    呵呵,测试下,不错的效果的

  7. web前端寒风说道:

    确实不错,就不明白为什么套那么多层,呵呵

  8. 气死啦说道:

    终于解决了,谢谢。。.

  9. 人类说道:

    不错!很好很强大

  10. 情封说道:

    在FF下,页面缩小,有bug,背景图不能通栏了

评论已关闭。