? ?
电脑维修网
当前位置:电脑维修网 >操作系统 > 网站编程代码 >background-attachmen视差滚动效果

background-attachmen视差滚动效果

2015-01-30 09:42 | 作者:小猪猪 | 来源:电脑维修技术网 | 参与评论 | 点击:1746次

文章目录索引(?) [-]

  1. 文章简介
  2. 代码演示

文章简介

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

代码演示

  1. <style> 
  2. .fl {float: left !important;_display: inline;} 
  3. .main2 {background-image: url(main1_lc.jpg);background-repeat: no-repeat;background-position: center;background-attachment: fixed;} 
  4. .wrap {width: 1000px;height: 1830px;margin: 0px auto;overflow: hidden;line-height: 24px;} 
  5. .main2_of1 {margin: 200px 0 0 0;} 
  6. .main2_of2 {margin: 55px 0 0 20px;width: 450px;border-left: #fff 1px solid;color: #fff;position: relative;height: 605px;} 
  7. .main2_of2 dl {position: absolute;left: -9px;top: -25px;} 
  8. .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;} 
  9. .main2_of2 dd {width: 345px;line-height: 20px;} 
  10. .main2_of2 dd {float: left;margin: 20px 0 0 0;} 
  11. </style> 
  12. <div class="main2"> 
  13.   <div class="wrap"> 
  14.     <h3><img src="main2.png"></h3> 
  15.     <div class="fl main2_of1"> <img src="main2_l.png"> </div> 
  16.     <div class="fl main2_of2"> 
  17.       <dl> 
  18.         <dt>2004</dt> 
  19.         <dd>www.wikiblast.netwww.wikiblast.netwww.wikiblast.netwww.wikiblast.netwww.wikiblast.net</dd> 
  20.         <dt>2005</dt> 
  21.         <dd>www.wikiblast.netwww.wikiblast.netwww.wikiblast.netwww.wikiblast.netwww.wikiblast.net。</dd> 
  22.         <dt>2006</dt> 
  23.         <dd>www.wikiblast.netwww.wikiblast.netwww.wikiblast.netwww.wikiblast.net</dd> 
  24.         <dt>2007</dt> 
  25.         <dd>www.wikiblast.net</dd> 
  26.         <dt>2008</dt> 
  27.         <dd>www.wikiblast.net</dd> 
  28.         <dt>2009</dt> 
  29.         <dd>www.wikiblast.net</dd> 
  30.         <dt>2010</dt> 
  31.         <dd>www.wikiblast.net</dd> 
  32.         <dt>2011</dt> 
  33.         <dd>www.wikiblast.net</dd> 
  34.         <dt>2012</dt> 
  35.         <dd>www.wikiblast.net</dd> 
  36.         <dt>2013</dt> 
  37.         <dd>www.wikiblast.net</dd> 
  38.         <dt>2014</dt> 
  39.         <dd>www.wikiblast.net</dd> 
  40.       </dl> 
  41.     </div> 
  42.   </div> 
  43. </div> 

演示地址

转载时请注明:转载自《电脑维修技术网》原文地址:http://www.wikiblast.net/6/4/26296.html
凡文章内未标注来源均为原创文章!恭候您的意见
------分隔线----------------------------
?
最新评论
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
友情连接版权声明广告合作联系我们意见投诉网站地图百度地图谷歌地图
敬告:本站所有信息都为网友发布,及网络收集而来,我们只对信息的合法性进行审核 请朋友们自行鉴别真实性。
老北京赛车-老北京赛车官网