HTML

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...

...多組div并列...

CSS

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

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

}

總結(jié)

以上是生活随笔為你收集整理的html怎么制作固定背景,使用CSS制作的页面背景固定和滚动效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。