[教學] 免用JS！透過純CSS3 就可製作出，背景式的視差滾動特效

梅干 2019/04/08 1 分鐘閱讀

　　雖然視差滾動已不是什麼新特效，但還是有不少朋友相當的喜愛，透過滑鼠的滾動，讓畫面一直停滯在一個區塊，但內容卻會一直不斷的更換，看起來相當的炫，說真的梅干個人不是那麼的喜愛，但應用在產品或是活動頁面上，卻是相當的適合。

這麼酷炫的特效，大多需要搭配Javascript與CSS，才能達這麼炫的特效，再加上視差滾動的方式相當的多種，而唯一讓梅干比較喜愛的方式，則是背景式的視差滾動，若只是要製作背景式的視差滾動，其實只需透過純CSS3就可以辦到，且設定上還相當的容易，因此喜愛視差滾動的朋友，現在也一塊來看看囉！怎透過純CSS方式來實作出來。

Step1
首先，先建立一個DIV區塊，並命名為<div class="parallax"></div>。

Step2
接著將parallax的CSS樣式，分別設定區塊的高度、背景圖片，以及將背景設為fixed固定。

.parallax {
  /* 設定背景圖片/居中/不重覆 */
  background: url("https://photo.minwt.com/cc0/09.jpg")center center no-repeat;
/* 設定區塊高度 */
min-height: 600px;
/* 背景自動縮放/固定 */
background-attachment: fixed;
background-size: cover;
}