CSS3中background-size實作背景圖片大小可自訂的幾種效果（程式碼實例）-css教學-PHP中文網

CSS3中background-size實作背景圖片大小可自訂的幾種效果（程式碼實例）

易达

發布： 2020-06-08 16:33:31

原創

3453 人瀏覽過

本文目標：

1、掌握background-size背景圖片大小的幾種設定方法

問題：

1、實現以下效果，使用純DIV CSS ，必須使用background-size

CSS3中background-size實作背景圖片大小可自訂的幾種效果（程式碼實例）

附加說明：

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

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

3、要求整體居中顯示

現在來具體操作

#1、準備素材：根目錄建立images資料夾，把相關素材圖片都存放與此，素材有

CSS3中background-size實作背景圖片大小可自訂的幾種效果（程式碼實例）

2、創建好index.html，寫好架構，架構如何分析呢

##想法分析：

1、目標由5個div組成，每個div的背景圖片都是一樣的，只不過背景圖片的呈現方式不同

2、每個div都帶有一個標題

根據分析，我們得到以下程式碼

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>背景图片大小background-size演示</title>
</head>
<body>
    <div class="container">
        <h4>原样显示背景图片</h4>
        <div class="demo bg1"></div>
        <h4>300宽和100高显示背景图片</h4>
        <div class="demo bg2"></div>
        <h4>80%宽和60%高显示背景图片</h4>
        <div class="demo bg3"></div>
        <h4>背景图片填充整个容器</h4>
        <div class="demo bg4"></div>
        <h4>背景图片扩充到容器的一边即可</h4>
        <div class="demo bg5"></div>
    </div>
</body>
</html>

登入後複製

3、寫樣式，建立css資料夾，裡面新建index.css，裡面的樣式怎麼寫了，以下是分析想法

思路分析：

1、.container *

思路分析

#1、為了設定容器裡的所有元素的公共樣式，我們可以將這些公共程式碼寫入.container * 樣式內

所以index.css中加入程式碼如下：

.container *{
    padding:0;
    margin:0;
}

登入後複製

2、.demo

##想法分析：

#1 、根據要求得知寬600，高300，所以轉成代碼即width:600px;height:300px;背景圖片是愛莎，且不重複所以background: url(../images/CSS3中background-size實作背景圖片大小可自訂的幾種效果（程式碼實例）) no-repeat ;帶邊框所以

border: 1px solid #999;要居中所以margin: 0 auto 10px auto;

##所以index.css添加程式碼如下：

.demo {
    background: url(../images/CSS3中background-size實作背景圖片大小可自訂的幾種效果（程式碼實例 ）) no-repeat;
    width: 600px;
    height: 300px;
    border: 1px solid #999;
    margin: 0 auto 10px auto;
}

登入後複製

3、標題h4

想法分析：

1、要求文字居中，所以轉換成程式碼即 text-align: center;、

#所以index .css中加入程式碼如下：

h4{
    text-align: center;
}

登入後複製

4、5種不同的顯示方式

想法分析：

##1、第一種方式就是預設的方式，就是背景圖片多大，就顯示多大

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的全部內容如下：

.container *{
    padding:0;
    margin: 0;
}
.demo {
    background: url(../images/CSS3中background-size實作背景圖片大小可自訂的幾種效果（程式碼實例 ）) no-repeat;
    width: 600px;
    height: 300px;
    border: 1px solid #999;
    margin: 0 auto 10px auto;
}
h4{
    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">
        <h4>原样显示背景图片</h4>
        <div class="demo bg1"></div>
        <h4>300宽和100高显示背景图片</h4>
        <div class="demo bg2"></div>
        <h4>80%宽和60%高显示背景图片</h4>
        <div class="demo bg3"></div>
        <h4>背景图片填充整个容器</h4>
        <div class="demo bg4"></div>
        <h4>背景图片扩充到容器的一边即可</h4>
        <div class="demo bg5"></div>
    </div>
</body>
</html>

登入後複製

運行效果如下：

#到此為止，我們就實現了全部的需求

CSS3中background-size實作背景圖片大小可自訂的幾種效果（程式碼實例） #總結：