實(shí)現(xiàn)代碼:
body {
? ? ? ? overflow: hidden;
? ? ? ? position: fixed;
? ? ? ? width:100%;
? ? ? ? height:100%;
? ? ? ? background: url("image.png") no-repeat;
? ? ? ? background-size:cover;
}
擴(kuò)展:
background-size的屬性:
background-size: auto || <length> || <percentage> || cover || contain
取值說明:
1累澡、auto:此值為默認(rèn)值乐严,保持背景圖片的原始高度和寬度瑟慈;
2且改、<length>此值設(shè)置具體的值涨享,可以改變背景圖片的大惺餐厅瞎;
3、<percentage>此值為百分值硝烂,可以是0%?100%之間任何值箕别,但此值只能應(yīng)用在塊元素上,所設(shè)置百分值將使用背景圖片大小根據(jù)所在元素的寬度的百分比來計(jì)算。
4究孕、cover:此值是將圖片放大啥酱,以適合鋪滿整個(gè)容器,這個(gè)主要運(yùn)用在厨诸,當(dāng)圖片小于容器時(shí),又無法使用background-repeat來實(shí)現(xiàn)時(shí)禾酱,我們就可以采用cover;將背景圖片放大到適合容器的大小微酬,但這種方法會(huì)使用背景圖片失真;
5颤陶、contain:此值剛好與cover相反颗管,其主要是將背景圖片縮小,以適合鋪滿整個(gè)容器滓走,這個(gè)主要運(yùn)用在垦江,當(dāng)背景圖片大于元素容器時(shí),而又需要將背景圖片全部顯示出來搅方,此時(shí)我們就可以使用contain將圖片縮小到適合容器大小為止比吭,這種方法同樣會(huì)使用圖片失真。
附:當(dāng)background-size取值為<length>和<percentage>時(shí)可以設(shè)置兩個(gè)值姨涡,也可以設(shè)置一個(gè)值衩藤,當(dāng)只取一個(gè)值時(shí),第二個(gè)值相當(dāng)于auto涛漂,但這里的auto并不會(huì)使背景圖片的高度保持自己原始高度赏表,而會(huì)與第一個(gè)值相同。