小編給大家分享一下css如何設(shè)置背景圖大小，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)客戶idc服務(wù)中心，提供川西大數(shù)據(jù)中心、成都服務(wù)器、成都主機托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價的產(chǎn)品以及開放、透明、穩(wěn)定、高性價比的服務(wù)，資深網(wǎng)絡(luò)工程師在機房提供7*24小時標(biāo)準(zhǔn)級技術(shù)保障。

css中可使用background-size屬性來設(shè)置背景圖大小，語法“background-size:數(shù)值|百分比|cover|contain;”；其中cover代表等比擴展圖片來填滿元素，contain代表等比縮小圖片來適應(yīng)元素的尺寸。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3設(shè)置背景圖片的大小

 




Lorem ipsum，中文又稱“亂數(shù)假文”， 是指一篇常用于排版設(shè)計領(lǐng)域的拉丁文文章 ，主要的目的為測試文章或文字在不同字型、版型下看起來的效果。


原始圖片: 

css3 background-size 屬性

background-size屬性指定背景圖片大??；在firefox，chrome，以及ie9上都可以使用。

具體使用方法如下：

• 背景圖尺寸（數(shù)值表示方式）：

#background-size{ 
background-size:200px 100px; 
}

• 背景圖尺寸（百分比表示方式）：

#background-size2{ 
background-size:30% 60%; 
}

• 背景圖尺寸（等比擴展圖片來填滿元素，即cover值）：

#background-size3{ 
background-size:cover; 
}

• 背景圖尺寸（等比縮小圖片來適應(yīng)元素的尺寸，即contain值）：

#background-size4{ 
background-size:contain; 
}

• 背景圖尺寸（以圖片自身大小來填充元素，即auto值）：

#background-size5{ 
background-size:auto; 
}

以上是“css如何設(shè)置背景圖大小”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！