当鼠标滚动的时候，背景图设置为固定定位，那么效果就是感觉模块被压扁的感觉，再稍微用js更改背景图y轴的定位来增加效果，
background-attachment 以前没用过，这次用到了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .box { display:-webkit-box; width:700px;} .box .item2{ -webkit-box-flex:2; background-color:#fddfdd;} .box .item3{ -webkit-box-flex:2; background-color:#C63;} .box .item:first-child { width:200px;} header { height:700px; background-image:url(01.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed;} nav { height:900px;} </style> </head> <body> <div class="ds"> <header>头</header> <nav>导航</nav> <aside>侧边栏</aside> <article>文章</article> <footer>页尾</footer> </div> <script> window.onscroll = function (){ if(document.body.scrollTop>0 || document.documentElement.scrollTop>0){ var top = document.body.scrollTop ; if(top<=700){ var headr = document.getElementsByTagName("header")[0]; headr.style.backgroundPosition = "0px " + -top/8+"px"; } } } </script> </body> </html>