CSS3中如何使用background-size定義背景圖片大小？針對這個問題，今天小編總結(jié)這篇有關(guān)background-size屬性的文章，可供感興趣的小伙伴們參考借鑒，希望對大家有所幫助。

寶清網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計等網(wǎng)站項目制作，到程序開發(fā)，運營維護(hù)。成都創(chuàng)新互聯(lián)公司成立與2013年到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

1、實現(xiàn)以下效果，使用純DIV+CSS，必須使用background-size

附加說明：

1、背景圖片大小本身是500*300大小

2、div容器寬度600*300大小

3、要求整體居中顯示

現(xiàn)在來具體操作

1、準(zhǔn)備素材：根目錄創(chuàng)建images文件夾，把相關(guān)素材圖片都存放與此，素材有

2、創(chuàng)建好index.html，寫好架構(gòu)，架構(gòu)如何分析呢

思路分析：

1、目標(biāo)由5個div組成，每個div的背景圖片都是一樣的，只不過背景圖片的呈現(xiàn)方式不同

2、每個div都帶有一個標(biāo)題

根據(jù)分析，我們得出以下代碼

    
    


    

        
原樣顯示背景圖片
        

        
300寬和100高顯示背景圖片
        

        
80%寬和60%高顯示背景圖片
        

        
背景圖片填充整個容器
        

        
背景圖片擴(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、第四種方式就是讓背景圖片填充整個div，這里要注意的是，如果背景圖片寬<容器的寬，那么背景圖片就會等比例增長，直到填滿了容器，如果高度增長到大于容器的高度，那么超出容器的部分就會被隱藏，只顯示容器大小的部分

5、第五種方式就是將背景圖片等比縮放至某一條邊填滿了容器的一條邊為止

這里要要注意一點，除了第2種，第三種，不是等比例擴(kuò)展圖片，其他的幾個都是等比例擴(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中

    
    
    


    

        
原樣顯示背景圖片
        

        
300寬和100高顯示背景圖片
        

        
80%寬和60%高顯示背景圖片
        

        
背景圖片填充整個容器
        

        
背景圖片擴(kuò)充到容器的一邊即可
        

    

運行效果如下：

到此為止，我們就實現(xiàn)了全部的需求

總結(jié)：

1、background-size主要用來設(shè)置背景圖片的大小，語法格式如下：

background-size:auto|固定寬和高|百分比寬和高|cover|contain

上文描述的就是background-size屬性的用法，具體使用情況還需要大家自己動手實驗使用過才能領(lǐng)會。如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：CSS3中如何使用background-size定義背景圖片大小-創(chuàng)新互聯(lián)
鏈接分享：http://weahome.cn/article/desppp.html