最近開始在工作上使用 Tailwind CSS 作為主要的 CSS framework，加上正在學習 React，覺得應該要切個網站熟悉兩者的語法，就找了知名電玩網站做為參考的標的。切版時不免會打開 F12 看看內外距、字型的大小，
在看到這個小標題時，原先以為背景是以圖片去實現，在打開 F12 時則是實際看到：
background-color: #04624f;
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(216, 243, 221, 0.56)), color-stop(60%, rgba(91, 225, 194, 0.56)), to(rgba(25, 201, 177, 0.56)));這才想到 CSS Background 一直是我沒有好好去熟悉的地方，因此希望能藉由這篇文去鞭策我自己好好學習它。
background-image
background-image 可以讓我們指定一個或多個背景圖，最常看到的相信會是在其中夾帶 url 搭配圖源：
div {
background-image: url(https://geographical.co.uk/media/k2/items/cache/8e4e30c8fc08507de1b0b5afc7d32a85_XL.jpg);
}除了圖源外，也可以使用 linear-gradient 做出漸層效果，例如：
div {
background-image: linear-gradient(#ffffff, #aaccff);
}background-image 僅需使用逗號隔開便可以夾帶多個值。假設背景的圖片過亮，就可以搭配 linear-gradient 做出讓圖片看起來比較暗的效果：
div {
width: 100%;
height: 500px;
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)),url(https://geographical.co.uk/media/k2/items/cache/8e4e30c8fc08507de1b0b5afc7d32a85_XL.jpg);
}background-image 在繪製時會由上往下繪製。以上述例子來看，linear-gradient 會被繪製在最上方，其次才是背景圖，由於該 linear-gradient 帶有透明度，因此在下方的背景圖也會被使用者所看到。若將順序調換，背景圖便會直接蓋過 linear-gradient。
回到最一開始提及的 background-image，它其實便是使用了 linear-gradient（註：-webkit-gradient 是已棄用的寫法，詳細可參考這篇，感謝前端社群網友解惑），效果類似這樣：
div {
background-image: linear-gradient(to top, rgba(216, 243, 221, 0.56), rgba(91, 225, 194, 0.56) 60%, rgba(25, 201, 177, 0.56));
}background-color
background-color 可接收一個 color 作為值。即便設定了 background-image，background-color 依然會出現在最下方。因此，若使用的 background-image 為去背圖，便可在透明區塊看到 background-color。
background-clip
background-clip 會為我們決定背景圖或顏色所延伸的範圍，可帶 border-box、padding-box、content-box 及 text 等。border-box 會將背景延伸至邊框、padding-box 延伸直到邊框、content-box 延伸直到內距區塊、text 則是僅呈現於元素內文字的最底色，也就是說若文字的顏色為透明（transparent），便會呈現背景色。
以下範例分別設定了這四種效果：
background-origin
background-origin 會為我們決定背景圖顯示的原點位置，可帶 border-box、padding-box、content-box 等三種值。與 background-clip 不同的是，background-clip 決定的是從哪裡開始顯示，而 background-origin 決定的則是從哪裡開始描繪。用一個例子相信就能看出差別。假設我有兩個 div，寬度及高度均為 400px、padding 為 20px、並有一個 2px 的邊框。準備一張 200x200 的圖片：
接著我們以 content-box 來感受差異：
可以看到，bg-origin 從完整的繪製出了整張背景，而 bg-clip 則是被裁切掉了一部分。相關的 html, css 可參考此。
background-position
background-origin 依 box-model 為我們決定背景的顯示原點，background-position 則是決定背景的起始位置（initial position），可給予兩種維度，其給值的方式可以有很多種，例如：
當只給予單一值時，另一個維度會被設定為 50%，因此會自動水平或垂直置中。
維度亦可給予數值，例如：
當給予數值時，會分別計算由左及上到起始位置的距離，由下及由右開始計算，只要在數值前加上 right, bottom 即可。例如：
background-position 亦可給予百分比。當我們指定百分比時，事實上在計算時會依照以下公式：
(容器寬－圖片寬) * 寬百分比 = 寬偏移值
(容器高－圖片高) * 高百分比 = 高偏移值
比如我們準備一份 HTML 及 CSS：
// index.html
<div class="bg-origin"></div>// style.css
html,
body {
margin: 0;
padding: 0;
}div {
width: 400px;
height: 400px;
background-image: url(https://fakeimg.pl/200/);
background-color: greenyellow;
}.bg-origin {
background-origin: border-box;
background-repeat: no-repeat;
background-position: 0 100%;
}
套用剛剛的公式計算高的偏移值：
(400px－200px) * 100%
如果你的數學沒有比我爛，應該可以算出 200px 的結果。我們可以開啟 Firefox 的量尺測量：
可以看到 Y 軸偏移到了 200px，畫面上就會看到背景圖緊貼著 div 的最下方。
background-repeat
background-repeat 可以決定背景重複呈現的方式，預設為 repeat，也就是不斷重複直到區域被蓋滿，上面使用過的 no-repeat 則代表「背景僅出現一次」。
space 讓背景圖可以分布在區域中，也因此區域的部分區塊會因為背景圖的寬或高無法整除區域的寬或高而產生間隔，例如：
相較於 space, round 則是在沒有背景被裁切到的情況下，透過伸展或壓縮讓背景平均被分配在區域中。
如同 background-position ， background-repeat 也可依照順序分別設定水平和垂直的重複方式，例如：
亦可給予 repeat-x 或 repeat-y，其分別代表 repeat no-repeat 以及 no-repeat repeat。
background-size
background-size 顧名思義就是讓我們決定背景在區域中呈現的大小或比例。contain 會以不破壞背景的比例為前提，盡可能填滿區域直到寬或高被填滿；cover 則是一樣不破壞背景，但會以裁切作為犧牲填滿區域的寬或高，例如：
background-size 亦可以單或雙（分別設定水平、置中）給予固定值的大小。
在使用者可以自行上傳的內容網站中，難保會有使用者提供了與版型寬高差距甚大的圖片，這時就可以使用 background-size: cover 配合 background-position: center，例如當圖源是這張圖時：
就能避免因該圖片為手機桌布比例，導致貓咪圖片被破壞造成美觀問題。
background-attachment
background-attachment 決定背景圖片在視圖的位置。當選擇為 scroll 時，背景對區域而言是固定的，捲動時背景不會跟著移動：
fixed 讓背景對於視圖而言是固定的，當捲動時，區域隨著內容改變，背景則是固定在視圖的該區塊：
local 則是讓背景是固定的，當區域捲動時，背景就會跟著被捲動。
關於 background 的筆記就記錄到這裡，background (簡寫屬性)我自己是覺得相對可讀性比較不好也複雜，很少使用，也希望能先以熟悉 background 系列的其他屬性為主，希望這篇文能做為未來遺忘這些屬性時的參照，也希望能幫助到路過的你，如果內文有任何錯誤，也煩請不吝指出，謝謝～
References:
