正如我之前所說，文件樹中的每個元素都是一個方盒。每個盒都有背景層，它可以是完全透明的、有顏色的或一張圖片。背景層由 8 個 CSS 屬性（和 1 個簡寫屬性）控制。
background-color
background-color 屬性設定元素背景顏色。它的值可以是一個合法的顏色值或 transparent 關鍵字。
|
1 2 3 |
.left { background-color: #ffdb3a; } .middle { background-color: #67b3dd; } .right { background-color: transparent; } |
背景顏色繪製在由 background-clip 屬性指定的盒模型區域內。如果同時設定了背景圖片，顏色層會在它們後面。不像圖片層可以設定多個，每個元素只擁有一個顏色層。
background-image
background-image 屬性為元素定義一個（或多個）背景圖片。它的值通常是用 url() 符號定義的圖片 url。none 也是允許的，它會被當做空的一層。
|
1 2 |
.left { background-image: url('ire.png'); } .right { background-image: none; } |
我們也可以指定多個背景圖片，用逗號隔開。沿著 z 軸從前向後依次繪製每個圖片。
|
1 2 3 4 5 6 |
.middle { background-image: url('khaled.png'), url('ire.png'); /* Other styles */ background-repeat: no-repeat; background-size: 100px; } |
background-repeat
在 background-size 指定大小和 background-position 指定位置後，background-repeat 屬性控制如何平鋪背景圖片。
屬性值可以是以下關鍵字之一：repeat-x、repeat-y、repeat、space、round、no-repeat。除了前兩個（repeat-x 和 repeat-y）之外，其他關鍵字可以寫一次來同時定義 x 軸和 y 軸，或分開定義兩個維度。
|
1 2 3 4 5 6 7 8 9 |
.top-outer-left { background-repeat: repeat-x; } .top-inner-left { background-repeat: repeat-y; } .top-inner-right { background-repeat: repeat; } .top-outer-right { background-repeat: space; } .bottom-outer-left { background-repeat: round; } .bottom-inner-left { background-repeat: no-repeat; } .bottom-inner-right { background-repeat: space repeat; } .bottom-outer-right { background-repeat: round space; } |
background-size
background-size 屬性定義背景圖片的大小。它的值可以是一個關鍵字、一個長度或一個百分比。
屬性可用的關鍵字是 contain 和 cover。contain 會按圖片比例將其放大至寬和高完全適應區域，與之相反，cover 會將影像調整至能夠完全覆蓋該區域的最小尺寸。
|
1 2 3 4 5 6 7 8 9 |
.left { background-size: contain; background-image: url('ire.png'); background-repeat: no-repeat; } .right { background-size: cover; /* Other styles same as .left */ } |
對於長度值和百分比，我們可以用來定義背景圖片的寬高。百分比值根據元素的尺寸來計算。
|
1 2 |
.left { background-size: 50px; /* Other styles same as .left */ } .right { background-size: 50% 80%; /* Other styles same as .left */ } |
background-attachment
background-attachment 屬性控制背景圖片在可視區和元素中如何滾動。它有三個可能的值。
fixed 意思是背景圖片相對於可視區固定，即使使用者滾動可視區時也不移動。local 意思是背景在元素中位置固定。如果元素有滾動機制，背景圖片會相對於頂端定位，當使用者滾動元素時，背景圖片會離開視野。最後，scroll 意思是背景圖片固定，不會隨著元素內容滾動。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.left { background-attachment: fixed; background-size: 50%; background-image: url('ire.png'); background-repeat: no-repeat; overflow: scroll; } .middle { background-attachment: local; /* Other styles same as .left */ } .right { background-attachment: scroll; /* Other styles same as .left */ } |
background-position
這個屬性，結合 background-origin 屬性，定義了背景圖片起始位置。它的值可以是一個關鍵字、一個長度或一個百分比，我們可以依次定義 x 軸和 y 軸的位置。
可用的關鍵字有top、right、bottom、left 和 center。我們可以任意組合使用，如果只指定了一個關鍵字，另一個預設是 center。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.top-left { background-position: top; background-size: 50%; background-image: url('ire.png'); background-repeat: no-repeat; } .top-middle { background-position: right; /* Other styles same as .top-left */ } .top-right { background-position: bottom; /* Other styles same as .top-left */ } .bottom-left { background-position: left; /* Other styles same as .top-left */ } .bottom-right { background-position: center; /* Other styles same as .top-left */ } |
對於長度值和百分比值，我們也可以依次定義 x 軸和 y 軸的位置。百分比值與容器元素相關。
|
1 2 |
.left { background-position: 20px 70px; /* Others same as .top-left */ } .right { background-position: 50%; /* Others same as .top-left */ } |
background-origin
background-origin 屬性定義背景圖片根據盒模型的哪個區域來定位。
可用的值有 border-box，圖片相對於邊框（Border）定位，padding-box，圖片相對於內邊距框（Padding）定位，content-box，圖片相對於內容框（Content）定位。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.left { background-origin: border-box; background-size: 50%; background-image: url('ire.png'); background-repeat: no-repeat; background-position: top left; border: 10px dotted black; padding: 20px; } .middle { background-origin: padding-box; /* Other styles same as .left*/ } .right { background-origin: content-box; /* Other styles same as .left*/ } |
background-clip
background-clip 屬性決定背景繪製區域，也就是背景可以被繪製的區域。像 background-origin 屬性一樣，它也基於盒模型。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.left { background-clip: border-box; background-size: 50%; background-color: #ffdb3a; background-repeat: no-repeat; background-position: top left; border: 10px dotted black; padding: 20px; } .middle { background-clip: padding-box; /* Other styles same as .left*/ } .right { background-clip: content-box; /* Other styles same as .left*/ } |
background
最後，background 屬性是其他背景相關屬性的簡寫。子屬性的順序並沒有影響，因為每個屬性值的資料型別不同。然而，對於 background-origin 和 background-clip 屬性，如果只指定了一個盒模型區域，會應用到兩個屬性。如果指定了兩個，第一個設定為background-origin 屬性。
打賞支援我翻譯更多好文章，謝謝！
打賞譯者
打賞支援我翻譯更多好文章，謝謝！
任選一種支付方式
