之前項目中沒有涉及到視覺滾動的網站，但是畢竟是一種常用的網站類別，不得不瞭解。實現方法很簡單，做一下簡單的分析。。。 概述：滾動視差是指多層背景以不同的速度移動，形成立體的運動效果，來帶非常出色的視覺體驗。 屬性：background-attachment ，決定背景在視圖中形態(固定、隨區塊固定) ...
之前項目中沒有涉及到視覺滾動的網站，但是畢竟是一種常用的網站類別，不得不瞭解。實現方法很簡單，做一下簡單的分析。。。
概述：滾動視差是指多層背景以不同的速度移動，形成立體的運動效果，來帶非常出色的視覺體驗。
屬性：background-attachment ，決定背景在視圖中形態(固定、隨區塊固定)，需配合background-image使用。
值：background-attachment:scroll || local || fixed
local關鍵詞表示背景相當於元素的內容固定。如果一個元素擁有滾動機制，背景將會隨著元素的內容滾動。
使用：
<style type="text/css">
div{
text-align: center;
line-height: 500px;
height: 500px;
font-size: 26px;
font-weight: 700;
color: #000;
background-size:cover ;
background-size:100% 100%;
background-attachment:fixed ;
}
.img1 {
background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536924141216&di=f5d467e88b6f9c53cf984e468f7c79c6&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0117e2571b8b246ac72538120dd8a4.jpg%401280w_1l_2o_100sh.jpg');
}
.img2 {
background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536924182923&di=c27fca183f3ed28f4a37c2bd3fc862be&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20170913%2F089d5ddc894f47009a31d895efa906e3.jpeg');
}
.img3 {
background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536924217709&di=a073d28b17223d5d88822301c5a4e36f&imgtype=0&src=http%3A%2F%2Fpic14.nipic.com%2F20110605%2F1369025_165540642000_2.jpg');
}
</style>
<div class="img1">i am img1</div>
<div class="img2">i am img2</div>
<div class="img3">i am img3</div>
...END.
