css詳解background八大屬性及其含義

_Fatman發表於2021-04-19

background（背景）

以前筆者在css盒模型以及如何計算盒子的寬度一文中提到過盒模型可以看成由 元素外邊距（margin）、元素邊框（border）、元素內邊距（padding）和元素內容（content） 4部分組成，不過這只是從2D的視角來看盒模型的組成，而今天筆者將闡述如何從3D的視角看待盒模型的組成。

從2D視角看盒模型示意圖：
在這裡插入圖片描述

從3D視角看盒模型示意圖：
在這裡插入圖片描述
從3D視角看盒模型可以發現多了兩個屬性：background-image和background-color，而這兩個屬性都可以歸納到元素的background中，同時在元素的background中還有6個屬性^[1]可以影響到background-image和background-color的繪製情況，這篇博文主要是用來介紹background-image和background-color還有其餘6個屬性以及它們是怎樣影響到瀏覽器對元素盒子background的繪製的。

background-color（背景顏色）

背景顏色是背景中最常用的屬性，它支援的值型別有：

型別	示例
顏色名稱	red, white, black, transparent
16進位制顏色碼	#FF0000, #FFF, #000, #00000000
rgb顏色值	rgb(255, 0, 0), rgb(255, 255, 255), rgb(0, 0, 0)
rgba顏色值	rgba(0, 0, 0, 0)
hsla顏色值	hsla(0,0%,0%,0)

關於rgba顏色值和hsla顏色值，筆者在有趣的css—隱藏元素的7種思路中寫過詳細的使用示例，感興趣的讀者可以看看。

background-color（背景顏色）示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>background-color（背景顏色）示例</title>
        <style type="text/css">
            body {
                margin: 24px;
                padding: 24px;
                border: 1px solid black;
            }
            div {
                width: 420px;
                height: 320px;
                background-color: #06b7e1;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

background-color（背景顏色）示例效果圖：
在這裡插入圖片描述

background-image（背景圖片）

背景圖片的書寫示例：
background-image: url(path);

path代表存放圖片的路徑，它可以是絕對路徑，也可以是相對路徑。

背景圖片在z軸上比背景顏色更靠近使用者，背景圖片在完全不透明的情況下，會完全遮蓋住背景顏色。

background-image（背景圖片）示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title> background-image（背景圖片）示例</title>
        <style type="text/css">
            body {
                margin: 24px;
                padding: 24px;
                border: 1px solid black;
            }
            div {
                width: 420px;
                height: 320px;
                background-color: #06b7e1;
                background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

background-image（背景圖片）示例效果圖：
在這裡插入圖片描述

background-size（背景圖片尺寸大小）

背景圖片尺寸大小支援的值型別有：

型別	示例	含義
百分比	20% 30%	背景圖片佔據背景區寬度的百分之20，高度的百分之30
畫素	200px 300px	背景圖片的寬度為200畫素，高度為300畫素
覆蓋	cover	保持圖片寬高比進行拉伸，使其完全佔據背景區
包含	contain	保持圖片寬高比進行縮放，使其恰好適合背景區

background-size（背景圖片尺寸大小）示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>background-size（背景圖片尺寸大小）示例</title>
        <style type="text/css">
            body {
                margin: 24px;
                padding: 24px;
                border: 1px solid black;
            }
            div {
                width: 420px;
                height: 320px;
                margin: 24px;
                background-color: #06b7e1;
                background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
            }
            #percentage {
                background-size: 20% 30%;
            }
            #pixel {
                background-size: 200px 300px;
            }
            #cover {
                background-size: cover;
            }
            #contain {
                background-size: contain;
            }
        </style>
    </head>
    <body>
        <div id="percentage"></div>
        <div id="pixel"></div>
        <div id="cover"></div>
        <div id="contain"></div>
    </body>
</html>

background-size（背景圖片尺寸大小）示例效果圖：
在這裡插入圖片描述

background-repeat（背景圖片重複方式）

背景圖片重複方式支援的值以及含義:

值	含義
no-repeat	背景圖片不重複
repeat	預設值，背景圖片在垂直和水平方向都重複
repeat-x	背景圖片在水平方向重複
repeat-y	背景圖片在垂直方向重複

background-repeat（背景圖片重複方式）示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>background-repeat（背景圖片重複方式）示例</title>
        <style type="text/css">
            body {
                margin: 24px;
                padding: 24px;
                border: 1px solid black;
            }
            div {
                width: 420px;
                height: 320px;
                margin: 24px;
                background-color: #06b7e1;
                background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
                background-size: 42px 32px;
            }
        </style>
    </head>
    <body>
        <div style="background-repeat: no-repeat;"></div>
        <div style="background-repeat: repeat;"></div>
        <div style="background-repeat: repeat-x;"></div>
        <div style="background-repeat: repeat-y;"></div>
    </body>
</html>

background-repeat（背景圖片重複方式）示例效果圖：
在這裡插入圖片描述

background-position（背景圖片位置）

background-position總共有5個屬性，分別是top、right、bottom、left、center，這個5個屬性可以單獨使用，也可以兩兩使用。

單獨使用時，預設第二個引數為center，兩兩使用時背景圖片佔據位置如下圖：

在這裡插入圖片描述
background-position（背景圖片位置）示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>background-position（背景圖片位置）示例</title>
        <style type="text/css">
            body {
                margin: 24px;
                padding: 24px;
                border: 1px solid black;
            }
            div {
                width: 420px;
                height: 320px;
                margin: 24px;
                background-color: #06b7e1;
                background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
                background-size: 140px 140px;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div style="background-position: top;"></div>
        <div style="background-position: right;"></div>
        <div style="background-position: bottom center;"></div>
        <div style="background-position: left center;"></div>
    </body>
</html>

background-position（背景圖片位置）示例效果圖：

在這裡插入圖片描述

background-attachment（背景圖片是否固定）

背景圖片是否固定支援的值以及含義:

值	含義
scroll	預設值，背景圖片不固定，在視窗內滾動元素時，背景圖片跟隨元素一起滾動
fixed	背景圖片固定，在視窗內滾動元素時，背景圖片不跟隨元素一起滾動

背景圖片不固定示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>背景圖片不固定示例</title>
        <style type="text/css">
            body {
                margin: 24px;
                padding: 24px;
                border: 1px solid black;
            }
            div {
                width: 100%;
                height: 2000px;
                margin: 24px;
                background-color: #06b7e1;
                background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
                background-size: 140px 140px;
                background-repeat: repeat;
                background-attachment: scroll;
            }

            p {
                font-size: 64px;
                font-weight: bold;
                color: white;
            }
        </style>
    </head>
    <body>
        <div>
            <p>1  Fatman</p>
            <p>2  Fatman</p>
            <p>3  Fatman</p>
            <p>4  Fatman</p>
            <p>5  Fatman</p>
            <p>6  Fatman</p>
            <p>7  Fatman</p>
            <p>8  Fatman</p>
        </div>
    </body>
</html>

背景圖片不固定示例效果圖：
在這裡插入圖片描述

背景圖片固定示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>背景圖片固定示例</title>
        <style type="text/css">
            body {
                margin: 24px;
                padding: 24px;
                border: 1px solid black;
            }
            div {
                width: 100%;
                height: 2000px;
                margin: 24px;
                background-color: #06b7e1;
                background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
                background-size: 140px 140px;
                background-repeat: repeat;
                background-attachment: fixed;
            }

            p {
                font-size: 64px;
                font-weight: bold;
                color: white;
            }
        </style>
    </head>
    <body>
        <div>
            <p>1  Fatman</p>
            <p>2  Fatman</p>
            <p>3  Fatman</p>
            <p>4  Fatman</p>
            <p>5  Fatman</p>
            <p>6  Fatman</p>
            <p>7  Fatman</p>
            <p>8  Fatman</p>
        </div>
    </body>
</html>

背景圖片固定示例效果圖：
在這裡插入圖片描述

background-clip（背景裁剪）

值	含義
border-box	背景（圖片+顏色）佔據盒模型的 border+padding+content 3個區域
padding-box	背景（圖片+顏色）佔據盒模型的 padding+content 2個區域
content-box	背景（圖片+顏色）佔據盒模型的 content 1個區域

注:設定background-clip:border-box時需要讓元素邊框完全透明或部分透明，否則邊框樣式會完全遮蓋住background-clip:border-box的效果。

background-clip（背景裁剪）示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>background-clip（背景裁剪）示例</title>
        <style type="text/css">
            body {
                margin: 24px;
                padding: 24px;
                border: 1px solid black;
            }
            div {
                width: 420px;
                height: 320px;
                margin: 24px;
                border: 32px dotted black;
                padding: 32px;
                background-color: #06b7e1;
                background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
                background-size: contain;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div style="background-clip: border-box;"></div>
        <div style="background-clip: padding-box;"></div>
        <div style="background-clip: content-box;"></div>
    </body>
</html>

background-clip（背景裁剪）示例效果圖：
在這裡插入圖片描述

background-origin（背景圖片定位參考系）

筆者在css詳解position五種屬性用法及其含義中提到過相對定位參考系是其在常規流中的位置，絕對定位的參考系是離其最近的定位祖先元素，固定定位的參考系是視窗。
background-position的定位參考系就與background-origin有關:

值	含義
border-box	背景圖片相對於元素border區域進行定位
padding-box	背景圖片相對於元素padding區域進行定位
content-box	背景圖片相對於元素content區域進行定位

注：background-clip控制背景（圖片+顏色）裁剪的區域，是將背景（圖片+顏色）根據設定的屬性值裁剪掉；而background-origin控制背景（圖片）定位時使用的參考系，它在不同屬性值切換下影響的表現效果是背景圖片隨著屬性值改動帶來的背景（圖片）擴大或縮放。

background-origin（背景圖片定位參考系）示例html程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>background-origin（背景圖片定位參考系）示例</title>
        <style type="text/css">
            body {
                margin: 24px;
                padding: 24px;
                border: 1px solid black;
            }
            div {
                width: 420px;
                height: 320px;
                margin: 24px;
                border: 32px dotted black;
                padding: 32px;
                background-color: #06b7e1;
                background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
                background-size: contain;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div style="background-origin: border-box;"></div>
        <div style="background-origin: padding-box;"></div>
        <div style="background-origin: content-box;"></div>
    </body>
</html>

background-origin（背景圖片定位參考系）示例效果圖：
在這裡插入圖片描述

尾言

筆者才疏學淺，慌忙之下難免有遺漏或是疏忽，如有錯誤之處，還望各位看官不吝賜教，筆者在此感謝。

參考

不單單隻有這6個，只是這6個比較常用。 ↩︎

css詳解position五種屬性用法及其含義
2021-04-12
CSS
學習CSS的background屬性及其取值（實踐）
2020-10-21
CSS
css的background屬性
2018-04-20
CSS
CSS background-origin屬性
2020-10-13
CSS
CSS3的background屬性
2020-11-19
CSSS3
css毛玻璃效果（外加background屬性）
2021-09-09
CSS
CSS3 background-size 屬性
2018-05-08
CSSS3
CSS定位屬性詳解
2019-03-03
CSS
CSS字型屬性和文字屬性詳解
2019-03-10
CSS
background 屬性
2022-04-16
background屬性
2020-11-22
CSS3背景裁切屬性——background-clip
2018-07-09
CSSS3
css3中transition屬性詳解
2022-01-14
CSSS3
CSS 自定義屬性指北
2022-05-10
CSS
css box-sizing屬性值詳解（MDN）
2019-08-07
CSS
初識css自定義屬性
2018-11-13
CSS
CSS 自定義屬性（變數）
2018-04-16
CSS變數
CSS中position屬性( absolute | relative | static | fixed )詳解
2019-02-22
CSS
使用 CSS 自定義屬性（變數）
2022-08-08
CSS變數
CSS - 定位屬性position使用詳解（static、relative、fixed、absolute）
2018-08-16
CSS
Symbol 及其屬性
2019-05-04
Symbol
display屬性詳解
2020-12-10
【譯】CSS 自定義屬性的策略指南
2018-07-05
CSS
安卓Property Animator動畫詳解（二）-自定義屬性
2019-03-04
安卓動畫
CSS變數（自定義屬性）實踐指南
2019-02-16
CSS變數
使用CSS自定義屬性構建骨架屏
2019-03-04
CSS
SAP CRM SPRO Customizing 裡 Text Object 屬性 continue 的含義
2021-07-29
Object
CSS 屬性篇(七)：Display屬性
2019-02-22
CSS
CSS自定義屬性 —— 別說你懂CSS相對單位
2018-07-31
CSS
CSS Var 自定義屬性中使用 Scss 變數
2022-06-28
CSS變數
Python - __slots__屬性詳解
2021-09-09
Python
z-index屬性詳解
2020-11-09
Index
HTML——② HTML 元素、屬性詳解
2019-04-10
HTML
css display 屬性
2019-09-24
CSS
CSS perspective 屬性
2019-04-20
CSS
CSS transform 屬性
2019-04-20
CSSORM
CSS display屬性的表格佈局相關屬性的解釋
2018-04-02
CSS
CSS background 背景
2018-12-03
CSS