1. 程式人生 > >【CSS背景圖片頁面自適應充滿螢幕】

【CSS背景圖片頁面自適應充滿螢幕】

實現程式碼:

body {                                

        overflow: hidden;

        position: fixed;

        width:100%;

        height:100%;

        background: url("image.png") no-repeat;

        background-size:cover;

}                                 

擴充套件:

background-size的屬性:

background-size: auto || <length> || <percentage> || cover || contain

取值說明:

1、auto:此值為預設值,保持背景圖片的原始高度和寬度;

2、<length>此值設定具體的值,可以改變背景圖片的大小;

3、<percentage>此值為百分值,可以是0%〜100%之間任何值,但此值只能應用在塊元素上,所設定百分值將使用背景圖片大小根據所在元素的寬度的百分比來計算。

4、cover:此值是將圖片放大,以適合鋪滿整個容器,這個主要運用在,當圖片小於容器時,又無法使用background-repeat來實現時,我們就可以採用cover;將背景圖片放大到適合容器的大小,但這種方法會使用背景圖片失真;

5、contain:此值剛好與cover相反,其主要是將背景圖片縮小,以適合鋪滿整個容器,這個主要運用在,當背景圖片大於元素容器時,而又需要將背景圖片全部顯示出來,此時我們就可以使用contain將圖片縮小到適合容器大小為止,這種方法同樣會使用圖片失真。

附:當background-size取值為<length><percentage>時可以設定兩個值,也可以設定一個值,當只取一個值時,第二個值相當於auto,但這裡的auto並不會使背景圖片的高度保持自己原始高度,而會與第一個值相同。