1

成都創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、重慶小程序開發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立十年以來，已經(jīng)為上1000家除甲醛各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的上1000家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。

效果:

2

效果:

3

效果:

4 background-size的用法

注意:盒子的大小是:

寬度:500px 高度:150px;

圖片的實(shí)際大小:寬度:533px 高度:300px;

此時(shí)的效果:

注意:寬度是100% 高度是auto:

所以超出的部分會(huì)隱藏掉

另一種情況:

此時(shí)的效果:

此時(shí)圖片的高度小于容器的高度 所以容器多出了很多空白地方

所以說:background:100%; 是有兩種呈現(xiàn)的效果。要么隱藏掉多余的部分圖片，要么容器活出空白地方

5

此時(shí)的效果:

6 

此時(shí)的效果:

此時(shí)圖片并沒有顯示完全

總結(jié):

background-size:100%;    // 寬度100% 高度auto(按圖片本身的寬/高比進(jìn)行縮放顯示) 這種不一定會(huì)鋪滿整個(gè)容器 也有可能超出的部分會(huì)被隱藏掉

backgrond-size:100% 100%;   // 寬度100% 拉伸 高度也是100% 拉伸 這種一定會(huì)鋪滿整個(gè)容器

background-size:cover;  // 也會(huì)鋪滿整個(gè)容器大小 圖片比例不變

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：css中background的使用總結(jié)-創(chuàng)新互聯(lián)
本文地址：http://weahome.cn/article/dgshjh.html