CSS3中如何使用background-size定義背景圖片大??？針對這個(gè)問題，今天小編總結(jié)這篇有關(guān)background-size屬性的文章，可供感興趣的小伙伴們參考借鑒，希望對大家有所幫助。
創(chuàng)新互聯(lián)公司是一家專業(yè)提供瑞安企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、網(wǎng)站制作、html5、小程序制作等業(yè)務(wù)。10年已為瑞安眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。
1、實(shí)現(xiàn)以下效果，使用純DIV+CSS，必須使用background-size
附加說明：
1、背景圖片大小本身是500*300大小
2、div容器寬度600*300大小
3、要求整體居中顯示
1、準(zhǔn)備素材：根目錄創(chuàng)建images文件夾，把相關(guān)素材圖片都存放與此，素材有
2、創(chuàng)建好index.html，寫好架構(gòu)，架構(gòu)如何分析呢
思路分析：
1、目標(biāo)由5個(gè)div組成，每個(gè)div的背景圖片都是一樣的，只不過背景圖片的呈現(xiàn)方式不同
2、每個(gè)div都帶有一個(gè)標(biāo)題
根據(jù)分析，我們得出以下代碼
重慶分公司
重慶分公司
背景圖片大小background-size演示
原樣顯示背景圖片
300寬和100高顯示背景圖片
80%寬和60%高顯示背景圖片
背景圖片填充整個(gè)容器
背景圖片擴(kuò)充到容器的一邊即可
3、寫樣式 ，創(chuàng)建css文件夾，里面新建index.css，里面的樣式怎么寫了，以下是分析思路
思路分析：
1、.container *
思路分析
1、為了設(shè)置容器里的所有元素的公共樣式，我們可以將這些公共代碼寫入.container * 樣式內(nèi)
所以index.css中添加代碼如下：
.container *{
padding:0;
margin:0;
}2、.demo
思路分析：
1、根據(jù)要求得知寬600，高300，所以轉(zhuǎn)成代碼即width:600px;height:300px;背景圖片是愛莎，且不重復(fù)所以background: url(../images/as.jpg) no-repeat;帶邊框所以
border: 1px solid #999;要居中所以margin: 0 auto 10px auto;
所以index.css中添加代碼如下：
.demo {
background: url(../images/as.jpg) no-repeat;
width: 600px;
height: 300px;
border: 1px solid #999;
margin: 0 auto 10px auto;
}3、標(biāo)題h5
思路分析：
1、要求文本居中，所以轉(zhuǎn)成代碼即 text-align: center;、
所以index.css中添加代碼如下：
h5{
text-align: center;
}4、5種不同的顯示方式
思路分析：
1、第一種方式就是默認(rèn)的方式，就是背景圖片多大，就顯示多大
2、第二種方式就是自定義固定寬高的方式顯示，要求背景圖片按照寬300，高100顯示
3、第三種方式就是按照自定義百分比的方式顯示，要求按照背景圖片容器div的寬*80%,高*60%顯示（即背景圖片最終寬=600*80%=480,高=300*60%=180）
4、第四種方式就是讓背景圖片填充整個(gè)div，這里要注意的是，如果背景圖片寬<容器的寬，那么背景圖片就會等比例增長，直到填滿了容器，如果高度增長到大于容器的高度，那么超出容器的部分就會被隱藏，只顯示容器大小的部分
5、第五種方式就是將背景圖片等比縮放至某一條邊填滿了容器的一條邊為止
這里要要注意一點(diǎn)，除了第2種，第三種，不是等比例擴(kuò)展圖片，其他的幾個(gè)都是等比例擴(kuò)展背景圖直到符合條件即停止擴(kuò)展
所以index.css中添加代碼如下：
.bg1 {
background-size: auto;
}
.bg2 {
background-size: 300px 100px;
}
.bg3 {
background-size: 80% 60%;
}
.bg4 {
background-size: cover;
}
.bg5 {
background-size: contain;
}到此為止，index.css的全部內(nèi)容如下：
.container *{
padding:0;
margin: 0;
}
.demo {
background: url(../images/as.jpg) no-repeat;
width: 600px;
height: 300px;
border: 1px solid #999;
margin: 0 auto 10px auto;
}
h5{
text-align: center;
}
.bg1 {
background-size: auto;
}
.bg2 {
background-size: 300px 100px;
}
.bg3 {
background-size: 80% 60%;
}
.bg4 {
background-size: cover;
}
.bg5 {
background-size: contain;
}然后將index.css引入index.html中
背景圖片大小background-size演示
原樣顯示背景圖片
300寬和100高顯示背景圖片
80%寬和60%高顯示背景圖片
背景圖片填充整個(gè)容器
背景圖片擴(kuò)充到容器的一邊即可
運(yùn)行效果如下：
到此為止，我們就實(shí)現(xiàn)了全部的需求
1、background-size主要用來設(shè)置背景圖片的大小，語法格式如下：
background-size:auto|固定寬和高|百分比寬和高|cover|contain
上文描述的就是background-size屬性的用法，具體使用情況還需要大家自己動手實(shí)驗(yàn)使用過才能領(lǐng)會。如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
