background-attachmen视差滚动效果

文章简介

一般有些时间，背景放了一个大图，上面再放个透明的图(如地图等)，然后随着滚轮滚动，形成一种视差，主要是用到background-attachment: fixed;属性。

代码演示

<style> 
.fl {float: left !important;_display: inline;} 
.main2 {background-image: url(main1_lc.jpg);background-repeat: no-repeat;background-position: center;background-attachment: fixed;} 
.wrap {width: 1000px;height: 1830px;margin: 0px auto;overflow: hidden;line-height: 24px;} 
.main2_of1 {margin: 200px 0 0 0;} 
.main2_of2 {margin: 55px 0 0 20px;width: 450px;border-left: #fff 1px solid;color: #fff;position: relative;height: 605px;} 
.main2_of2 dl {position: absolute;left: -9px;top: -25px;} 
.main2_of2 dt {background: url(main1_r.png) no-repeat;font: 400 18px/18px "宋体";color: #040404;font-size: 18px;padding: 0 10px 0 25px;width: 75px;text-align: center;} 
.main2_of2 dd {width: 345px;line-height: 20px;} 
.main2_of2 dd {float: left;margin: 20px 0 0 0;} 
</style> 
<div class="main2"> 
  <div class="wrap"> 
    <h3><img src="main2.png"></h3> 
    <div class="fl main2_of1"> <img src="main2_l.png"> </div> 
    <div class="fl main2_of2"> 
      <dl> 
        <dt>2004</dt> 
        <dd>www.pc811.comwww.pc811.comwww.pc811.comwww.pc811.comwww.pc811.com</dd> 
        <dt>2005</dt> 
        <dd>www.pc811.comwww.pc811.comwww.pc811.comwww.pc811.comwww.pc811.com。</dd> 
        <dt>2006</dt> 
        <dd>www.pc811.comwww.pc811.comwww.pc811.comwww.pc811.com</dd> 
        <dt>2007</dt> 
        <dd>www.pc811.com</dd> 
        <dt>2008</dt> 
        <dd>www.pc811.com</dd> 
        <dt>2009</dt> 
        <dd>www.pc811.com</dd> 
        <dt>2010</dt> 
        <dd>www.pc811.com</dd> 
        <dt>2011</dt> 
        <dd>www.pc811.com</dd> 
        <dt>2012</dt> 
        <dd>www.pc811.com</dd> 
        <dt>2013</dt> 
        <dd>www.pc811.com</dd> 
        <dt>2014</dt> 
        <dd>www.pc811.com</dd> 
      </dl> 
    </div> 
  </div> 
</div> 

演示地址