3.18 背景樣式
background-color 背景單色
可以使用各種顏色格式：16 進位代碼、rgba、hsla 等。
div{
background-color: red;
/* 或 */
background-color: #aabbcc;
/* 或 */
background-color: rgba(50, 50, 50, 1);
/* 或 */
background-color: hsla(120deg, 50%, 50%, 1);
}background-image 背景圖片
有一張圖片：
然後針對整個網頁(或任何元素區塊皆可)，撰寫以下 CSS：
結果呈現：會發現此圖在 <body> 區域內，不斷地水平、垂直反覆出現圖片。
background-repeat 設定圖片的重覆狀態
可選的值有：
repeat：預設，指的是圖片向 x 軸、y 軸反覆出現。repeat-x：圖片向 x 軸反覆出現。repeat-y：圖片向 y 軸反覆出現。no-repeat：不反覆出現，只出現一次。
範例：
背景圖片相關屬性
有一張圖片，大小為 寬 640px、高 428px：
撰寫如下：
結果如下：背景圖超過 div 的區域，會被遮掉看不到。
background-size 設定背景圖大小
結果呈現：
特殊關鍵字(contain)：(背景圖片 「寬」或「高」 其中一個會變成 100%，讓圖片在區域內能夠全部出現，不能被遮到。)
結果呈現：
如果將 div 的高度改成 100px 的話，則結果會變成：
特殊關鍵字(cover)：(背景圖片 「寬」或「高」 其中一個會變成 100%，讓圖片能夠佔滿整個區域，圖片會有部份被遮到。)
結果如圖：
background-position 設定背景圖位置
結果如圖：
所以該圖在區域內，搭配關鍵字的話，共有以下幾種組合：
也可以指定水平方向、固定方向的距離，單位可以是 px 或 %：
結果如圖：
也可以指定以下，表示距離右側 10px；距離下方 20px：
background-attachment 固定背景圖片
有以下三種模式：
scroll：(預設)，背景圖會隨著頁面滑動而跟著滑動，元素內則不會。local：元素區域內滑動則會跟著滑動。fixed：背景圖會固定在網頁的可視區域(viewport)。不管自己元素內、或頁面滑動，該背景圖皆不會滑動。
scroll(預設)：
背景圖會隨著頁面滑動而跟著滑動；元素區域內滑動則不會跟著滑動。
local：
元素區域內滑動則會跟著滑動。
fixed(行動版瀏覽器不一定支援)：
背景圖會固定在網頁的可視區域。
background-origin 設定背景圖顯示的區域
padding-box：(預設值)。設定圖片顯示區域是從 padding 區域開始。border-box：設定圖片顯示區域是從 border 區域開始。content-box：設定圖片顯示區域是從 content 區域開始。
範例：
background-clip 設定背景圖裁切的區域
padding-box：設定圖片顯示區域到 padding 區域，其它裁切。border-box：(預設值)。設定圖片顯示區域是到 border 區域，其它裁切。content-box：設定圖片顯示區域是到 content 區域，其它裁切。
範例：
background 背景圖片線性漸層色
方向可選的有：
to bottom：這是預設值。
to top
to right
to left
to bottom right
to bottom left
to top right
to top left
40deg (代表
to 40 度的方向)
範例：
關於顏色停駐點：
1、紅色在 30px 的位置，綠色也在 30px 的位置，沒有任何漸層效果發生；0px ~ 30px 由紅色填滿；30px到最後，由綠色填滿：
示意圖：
2、紅色在 30px 的位置，綠色在 100px 的位置，30px ~ 100px 這個區域，紅色到綠色漸層；0px ~ 30px 由紅色填滿，100px 到最後由綠色填滿：
示意圖：
3、30px 到 100px 由紅色變到綠色；100px 到 250px 由綠色變到黃色：(推理方式同上)
示意圖：
範例：
一個區域可以疊多張背景圖
可以直接參考這個例子，即各屬性值以半形逗號做區隔。
其它資源
Last updated