搜尋

首頁 >web前端 >css教學 >CSS3中background-size實作背景圖片大小可自訂的幾種效果（程式碼實例 ）

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

易达
易达原創
2020-06-08 15:50:363677瀏覽

本文目標：

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實作背景圖片大小可自訂的幾種效果（程式碼實例 ）#總結：

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

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

#

以上是CSS3中background-size實作背景圖片大小可自訂的幾種效果（程式碼實例 ）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS3中background-clip實現圖片裁切3種效果（程式碼實例 ）下一篇：CSS3中background-clip實現圖片裁切3種效果（程式碼實例 ）

相關文章

看更多