CSS3中如何使用background-size定義背景圖片大小

發(fā)布時間：2020-06-08 21:31:24 來源：億速云閱讀：276 作者：Leah 欄目：web開發(fā)

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

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)素材圖片都存放與此，素材有

CSS3中如何使用background-size定義背景圖片大小

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

思路分析：

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

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

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>背景圖片大小background-size演示</title>
</head>
<body>
    <div class="container">
        <h5>原樣顯示背景圖片</h5>
        <div class="demo bg1"></div>
        <h5>300寬和100高顯示背景圖片</h5>
        <div class="demo bg2"></div>
        <h5>80%寬和60%高顯示背景圖片</h5>
        <div class="demo bg3"></div>
        <h5>背景圖片填充整個容器</h5>
        <div class="demo bg4"></div>
        <h5>背景圖片擴充到容器的一邊即可</h5>
        <div class="demo bg5"></div>
    </div>
</body>
</html>

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種，第三種，不是等比例擴展圖片，其他的幾個都是等比例擴展背景圖直到符合條件即停止擴展

所以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中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景圖片大小background-size演示</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="container">
        <h5>原樣顯示背景圖片</h5>
        <div class="demo bg1"></div>
        <h5>300寬和100高顯示背景圖片</h5>
        <div class="demo bg2"></div>
        <h5>80%寬和60%高顯示背景圖片</h5>
        <div class="demo bg3"></div>
        <h5>背景圖片填充整個容器</h5>
        <div class="demo bg4"></div>
        <h5>背景圖片擴充到容器的一邊即可</h5>
        <div class="demo bg5"></div>
    </div>
</body>
</html>

運行效果如下：

CSS3中如何使用background-size定義背景圖片大小

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

總結(jié)：

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

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

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

向AI問一下細(xì)節(jié)

CSS3中如何使用background-size定義背景圖片大小

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

總結(jié)：

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽