CSS製作的頁面背景固定和滾動效果

如何建立一個不需要Javascript而僅僅只需CSS的background-attachment屬性就能實現頁面背景固定和滾動效果。我們看到現在有很多的網站項目使用了視差效果，通過圖片和背景的動態變化以及js指令碼來產生視差，而今天我們只需要CSS即可。

HTML結構很簡單，一個class為.cd-fixed-bg的div元素用於放置固定背景圖，一個class為.cd-scrolling-bg的div元素用於滾動的部分。我們可以放置多個.cd-fixed-bg和.cd-scrolling-bg編組。

代碼如下

複製代碼

<main>     <div class="cd-fixed-bg cd-bg-1">         <h1><!-- title goes here --></h1>     </div>        <div class="cd-scrolling-bg cd-color-2">         <div class="cd-container">             <p>                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...             </p>         </div>      </div>      ...多組div並列... </main>

CSS

那麼如何?背景固定和滾動效果呢？一開始，我想使用jQuery，也許我先應該讓一個div固定位置，然後當滾動頁面時改變背景圖片，但是覺得不好弄。而簡單的我們使用幾行CSS就能做到，將要固定的元素的背景background-size值設定為cover，background-attachment的值設定為fixed，這樣就實現了單頁面的背景固定和滾動效果。請看以下代碼：

代碼如下

複製代碼

body, html, main {     /* important */     height: 100%; }   .cd-fixed-bg {     min-height: 100%;     background-size: cover;     background-attachment: fixed;     background-repeat: no-repeat;     background-position: center center; }   .cd-fixed-bg.cd-bg-1 {   background-image: url("../img/cd-background-1.jpg"); } .cd-fixed-bg.cd-bg-2 {   background-image: url("../img/cd-background-2.jpg"); } .cd-fixed-bg.cd-bg-3 {   background-image: url("../img/cd-background-3.jpg"); }     .cd-scrolling-bg {     min-height: 100%; }