久久草情侣vs国产&久久精品国产av一级二级三级&日韩免费黄色视频&精品一区二区三区av天堂&玩弄少妇高潮a片水蜜桃网站&女教师韩国

歡迎來到億搜云建站平臺,全網(wǎng)營銷云系統(tǒng)加盟中心!

海量企業(yè)網(wǎng)站模板 · 任您選擇

美出特色,精出品質(zhì),一切為了企業(yè)更好的營銷

隱藏側(cè)欄
Beta
轉(zhuǎn)載

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

       經(jīng)驗     2016-02-17     eycms     68     0    

背景固定效果在許多的網(wǎng)站都能看到,今天我們一起來看一個關(guān)于CSS制作的頁面背景固定和滾動效果,應(yīng)用非常的好用希望對各位帶來幫助。

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

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

 代碼如下復(fù)制代碼

<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

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

 代碼如下復(fù)制代碼

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é)束END--

本文鏈接: http://www.kblvmr5.cn/station/experience/1181.html (轉(zhuǎn)載時請注明來源鏈接)

 
本文標(biāo)簽: 全部

下班PC閱讀不方便?

手機也可以隨時學(xué)習(xí)開發(fā)

微信關(guān)注公眾號“億搜云”
"億搜云平臺前端開發(fā)教學(xué)"
每日干貨技術(shù)分享
 

×

成為 億搜云平臺 代理商!

關(guān)注

微信
關(guān)注

微信掃一掃
獲取最新優(yōu)惠信息

億搜云平臺公眾號

客服

聯(lián)系
客服

很高興為您服務(wù)
尊敬的用戶,歡迎您咨詢,我們?yōu)樾掠脩魷蕚淞藘?yōu)惠好禮。 咨詢客服

聯(lián)系客服:

在線QQ: 40819446

客服電話: 15250286283

售前咨詢 售后服務(wù)
在線交談 智能小云

工作時間:

周一至周五: 09:00 - 17:00

WAP

手機
訪問

移動端訪問
手機上也能選模板

億搜云平臺手機端