利用CSS固定背景交替實現視差滾動效果

視差滾動效果近年來很受大家的歡迎，但實現這個功能一般都需要javaScript，而且實現做起來有一定的難度。就這個問題，我們跟大家分享另外一種比較簡單的視差滾動效果技術，只需要CSS就可以實現了。一起來看看吧。

演示

該滾動效果特點是使用固定背景與色塊內容交替，當訪客向下滾動時，背景是fixed固定的，具體請查看：在線演示

從上圖可以看出，內容向上滾動時，第一張背景是固定的，不會跟著向上滾動。即：固定背景 + 色塊內容 + 固定背景 + 色塊內容…這樣的交替方式，從而產生視差效果。

兼容性

IE9+ Firefox Chrome Safari Opera 使用教程

HTML代碼

HTML代碼結構很清晰，使用main標簽包住所有內容，其中.cd-fixed-bg樣式就是固定背景，.cd-scroll-bg樣式為色塊內容。

<main> <div class="cd-fixed-bg cd-bg-1"> <h1>標題</h1> </div>

<div class="cd-scrolling-bg cd-color-1"> <div class="cd-container"> <p> 內容... </p> </div> </div>

<div class="cd-fixed-bg cd-bg-2"> <h1>標題</h1> </div>

<div class="cd-scrolling-bg cd-color-2"> <div class="cd-container"> <p> 內容... </p> </div> </div> </main> CSS樣式 主要是通過css的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-fixed-bg.cd-bg-4 { background-image: url("../img/cd-background-4.jpg"); }

.cd-scrolling-bg { min-height: 100%; }

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

文章題目：利用CSS固定背景交替實現視差滾動效果
標題網址：http://m.kartarina.com/news5/318805.html

成都網站建設公司_創新互聯，為您提供品牌網站制作、服務器托管、用戶體驗、網站制作、響應式網站、網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯