學習如何使用 CSS 更改元素背景
可以使用多個 CSS 屬性來更改元素的背景：
background-color背景顏色background-image背景圖像background-clip背景區域background-position背景位置background-origin背景原點background-repeat背景重複background-attachment背景附著background-size背景大小
還有一個縮寫屬性 background，可以縮短定義並將它們分組在一行。
background-color 接受顏色值，可以是顏色關鍵字，也可以是 rgb 或 hsl 值：
p {
background-color: yellow;
}
div {
background-color: #333;
}
除了使用顏色，你還可以使用圖像作為元素的背景，指定圖像位置的 URL：
div {
background-image: url(image.png);
}
background-clip 可讓你決定背景圖片或顏色的區域。默認值為 border-box，該值延伸到邊框外緣。
其他值包括：
padding-box：將背景延伸到填充邊緣，不包括邊框。content-box：將背景延伸到內容邊緣，不包括填充。inherit：應用父元素的值。
當使用圖像作為背景時，你需要使用 background-position 屬性來設置圖像的放置位置。left、right、center 都是 X 軸的有效值，top、bottom 是 Y 軸的有效值：
div {
background-position: top right;
}
如果圖像比背景小，則需要使用 background-repeat 屬性設置行為。它應該在所有軸上重複 repeat-x、repeat-y，或者在所有軸上上重複 repeat？後者是默認值。還有一個值 no-repeat。
background-origin 讓你選擇背景應該應用的位置：
- 使用
padding-box在整個元素中，包括填充。 - 使用
border-box在整個元素中，包括邊框。 - 使用
content-box在元素中，不包括填充。
使用 background-attachment 可將背景附着到視窗，這樣滾動內容時不會影響背景：
div {
background-attachment: fixed;
}
默認值是 scroll。還有另一個值 local。可以通過這個 Codepen 範例更好地了解它們的行為。
最後一個背景屬性是 background-size。我們可以使用 3 個關鍵字：auto、cover 和 contain。 auto 是默認值。
cover 會展開圖像，直到整個元素都被背景覆蓋。
contain 在一個維度（x 或 y）覆蓋圖像的整個最小邊緣時停止展開，因此它完全包含在元素中。
還可以指定一個長度值，如果這樣做，則設置背景圖像的寬度（高度會自動定義）：
div {
background-size: 100%;
}
如果指定 2 個值，一個是寬度，另一個是高度：
div {
background-size: 800px 600px;
}
縮寫屬性 background 可以縮短定義並將其分組在一行。
以下是一個例子：
div {
background: url(bg.png) top left no-repeat;
}
如果使用圖像，並且圖像無法加載，可以設置替代顏色：
div {
background: url(image.png) yellow;
}
還可以將漸變設置為背景：
div {
background: linear-gradient(#fff, #333);
}