如何使用CSS制作頁面背景固定和滾動(dòng)效果

本篇內(nèi)容主要講解“如何使用CSS制作頁面背景固定和滾動(dòng)效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何使用CSS制作頁面背景固定和滾動(dòng)效果”吧!

如何創(chuàng)建一個(gè)不需要Javascript而僅僅只需CSS的background-attachment屬性就能實(shí)現(xiàn)頁面背景固定和滾動(dòng)效果。我們看到現(xiàn)在有很多的網(wǎng)站項(xiàng)目使用了視差效果，通過圖片和背景的動(dòng)態(tài)變化以及js腳本來產(chǎn)生視差，而今天我們只需要CSS即可。

HTML

HTML結(jié)構(gòu)很簡單，一個(gè)class為.cd-fixed-bg的p元素用于放置固定背景圖，一個(gè)class為.cd-scrolling-bg的p元素用于滾動(dòng)的部分。我們可以放置多個(gè).cd-fixed-bg和.cd-scrolling-bg編組。

<main> <p class="cd-fixed-bg cd-bg-1"> <h2><!-- title goes here --></h2> </p> <p class="cd-scrolling-bg cd-color-2"> <p 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> </p> </p> ...多組p并列... </main>

CSS

那么如何實(shí)現(xiàn)背景固定和滾動(dòng)效果呢？一開始，我想使用jQuery，也許我先應(yīng)該讓一個(gè)p固定位置，然后當(dāng)滾動(dòng)頁面時(shí)改變背景圖片，但是覺得不好弄。而簡單的我們使用幾行CSS就能做到，將要固定的元素的背景background-size值設(shè)置為cover，background-attachment的值設(shè)置為fixed，這樣就實(shí)現(xiàn)了單頁面的背景固定和滾動(dòng)效果。請看以下代碼：

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%; }

到此，相信大家對“如何使用CSS制作頁面背景固定和滾動(dòng)效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！