视觉差:利用background-attachment做视差滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title>滚动视觉差示例</title> <style> *{ padding:0; margin:0 } body{ text-align:center; background-attachment:fixed; } #main{ width: 1280px; margin:auto } .header{ background:#fff; padding: 10px 0 } .bg-attachment{ background:url(6.jpg) center center no-repeat; /*图片**/ box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset; -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset; -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset; -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset; -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset; background-attachment:fixed; } .bg-attachment .shadow{ width:80%; height:700px; overflow:hidden; margin:auto; } .div2{ background:url(qingz.jpg) center center no-repeat; /*图片**/ background-attachment:fixed; } </style> </head> <body> <div id="main"> <div class="header"> <img src="5.jpg"> <!--图片--> </div> <div class="bg-attachment"> <div class="shadow"></div> </div> <div class="header"> <img src="qi.jpg"><!--图片--> </div> <div class="bg-attachment div2"> <div class="shadow"></div> </div> </div> </body> </html>
给心灵一个纯净空间,让思想,情感,飞扬!