這是網頁標題

# 3.18 背景樣式 ## background-color 背景單色可以使用各種顏色格式：16 進位代碼、rgba、hsla 等。 ```css div{ background-color: red; /* 或 */ background-color: #aabbcc; /* 或 */ background-color: rgba(50, 50, 50, 1); /* 或 */ background-color: hsla(120deg, 50%, 50%, 1); } ``` ## background-image 背景圖片有一張圖片： ![](/files/-Lm_PxyLutoAZIRAW0My) 然後針對整個網頁(或任何元素區塊皆可)，撰寫以下 CSS： ```css body{ background-image: url("https://alldata.sgp1.digitaloceanspaces.com/images/christmas-dark.png"); } ``` 結果呈現：會發現此圖在 `` 區域內，不斷地水平、垂直反覆出現圖片。 ![](/files/-Lm_QAU5oaqwjoLLFQOm) ## **background-repeat 設定圖片的重覆狀態** ```css body{ background-image: url("https://alldata.sgp1.digitaloceanspaces.com/images/christmas-dark.png"); background-repeat: no-repeat; /* repeat-x repeat-y */ } ``` 可選的值有： * `repeat`：預設，指的是圖片向 x 軸、y 軸反覆出現。 * `repeat-x`：圖片向 x 軸反覆出現。 * `repeat-y`：圖片向 y 軸反覆出現。 * `no-repeat`：不反覆出現，只出現一次。 ![](/files/-Lm_QQJanWvhwesJo0jZ) 範例： {% embed url="" %} ## 背景圖片相關屬性有一張圖片，大小為寬 640px、高 428px： ![](/files/-Lm_QeweeV1G1nz-vDWr) 撰寫如下： ```markup 這是網頁標題

這是 div 的內容

``` 結果如下：背景圖超過 div 的區域，會被遮掉看不到。 ![](/files/-Lm_R-Ugy9ZzjjzY2ggQ) ### **background-size** 設定背景圖大小 ```css div.place_img{ width: 300px; height: 300px; border:1px solid red; background-image: url("./images/lion.jpg"); background-repeat: no-repeat; /* 背景圖的寬度會變成佔 div 區域寬度的 80%。 */ background-size: 80%; /* 例：背景圖的寬度及高度會變成佔 div 區域的寬高都 50%，圖片會變形。 background-size: 50% 50%; 例：背景圖寬高顯示固定單位，寬為 150px，高為 100px。 background-size: 150px 100px; */ } ``` 結果呈現： ![](/files/-Lm_RH2L6LgN5A-PMYf7) 特殊關鍵字(**contain**)：(背景圖片「寬」或「高」其中一個會變成 100%，讓圖片在**區域內能夠全部出現**，不能被遮到。) ```css div.place_img{ width: 300px; height: 300px; border:1px solid red; background-image: url("./images/lion.jpg"); background-repeat: no-repeat; /* 背景圖在該區域內要完整出現(寬或高其中一個會是 100%) */ background-size: contain; } ``` 結果呈現： ![](/files/-Lm_RWOJKTHSlC1FY-N_) 如果將 div 的高度改成 100px 的話，則結果會變成： ![](/files/-Lm_Rhl70mEYQ5Kya9t6) 特殊關鍵字(**cover**)：(背景圖片「寬」或「高」其中一個會變成 100%，讓圖片能夠**佔滿整個區域**，圖片會有部份被遮到。) ```css div.place_img{ width: 300px; height: 300px; border:1px solid red; background-image: url("./images/lion.jpg"); background-repeat: no-repeat; /* 背景圖要完整覆蓋該區域(寬或高其中一個會是 100%)，背景圖超出去的部份會被遮掉。 */ background-size: cover; } ``` 結果如圖： ![](/files/-Lm_RxNX1U1qLGYrlS-g) ### **background-position** 設定背景圖位置 ```css div.place_img{ width: 300px; height: 300px; border:1px solid red; background-image: url("./images/lion.jpg"); background-repeat: no-repeat; background-size: 80%; /* 水平方向：置中；垂直方向：置底 */ background-position: center bottom; } ``` 結果如圖： ![](/files/-Lm_SOHf6-wfSzUddoMJ) 所以該圖在區域內，搭配關鍵字的話，共有以下幾種組合： ```css background-position: left top; /* 水平方向：置左；垂直方向：置頂 */ background-position: center top; /* 水平方向：置中；垂直方向：置頂 */ background-position: right top; /* 水平方向：置右；垂直方向：置頂 */ background-position: left center; /* 水平方向：置左；垂直方向：置中 */ background-position: center center; /* 水平方向：置中；垂直方向：置中 */ background-position: right center; /* 水平方向：置右；垂直方向：置中 */ background-position: left bottom; /* 水平方向：置左；垂直方向：置底 */ background-position: center bottom; /* 水平方向：置中；垂直方向：置底 */ background-position: right bottom; /* 水平方向：置右；垂直方向：置底 */ ``` 也可以指定水平方向、固定方向的距離，單位可以是 px 或 %： ```css /* 水平方向：離左側 50px 的距離；垂直方向：離上側 10px 的距離 */ background-position: 50px 10px; ``` 結果如圖： ![](/files/-Lm_Sc91jm_DULU0Yt3m) 也可以指定以下，表示距離右側 10px；距離下方 20px： ```css background-position: right 10px bottom 20px; ``` {% embed url="" %} ### background-attachment 固定背景圖片有以下三種模式： * `scroll`：(預設)，背景圖會隨著頁面滑動而跟著滑動，元素內則不會。 * `local`：元素區域內滑動則**會**跟著滑動。 * `fixed`：背景圖會固定在網頁的可視區域(viewport)。不管自己元素內、或頁面滑動，該背景圖皆不會滑動。 scroll(預設)：背景圖會隨著頁面滑動而跟著滑動；元素區域內滑動則不會跟著滑動。 {% embed url="" %} local：元素區域內滑動則會跟著滑動。 {% embed url="" %} fixed(行動版瀏覽器不一定支援)：背景圖會固定在網頁的可視區域。 {% embed url="" %} {% embed url="" %} ### background-origin 設定背景圖顯示的區域 * `padding-box`：(預設值)。設定圖片顯示區域是從 padding 區域開始。 * `border-box`：設定圖片顯示區域是從 border 區域開始。 * `content-box`：設定圖片顯示區域是從 content 區域開始。範例： {% embed url="" %} ### background-clip 設定背景圖裁切的區域 * `padding-box`：設定圖片顯示區域到 padding 區域，其它裁切。 * `border-box`：(預設值)。設定圖片顯示區域是到 border 區域，其它裁切。 * `content-box`：設定圖片顯示區域是到 content 區域，其它裁切。範例： {% embed url="" %} ### background 背景圖片線性漸層色 ```css background: linear-gradient(方向, 顏色停止點1, 顏色停止點2, ...); ``` 方向可選的有： * to bottom：這是預設值。 * to top * to right * to left * to bottom right * to bottom left * to top right * to top left * 40deg (代表 `to 40 度` 的方向) ![](/files/-Lo-JXG2ioo5S0klzzIy) 範例： {% embed url="" %} 關於顏色停駐點： 1、紅色在 30px 的位置，綠色也在 30px 的位置，沒有任何漸層效果發生；0px \~ 30px 由紅色填滿；30px到最後，由綠色填滿： ```css background: linear-gradient(red 30px, green 30px); ``` 示意圖：

2、紅色在 30px 的位置，綠色在 100px 的位置，30px \~ 100px 這個區域，紅色到綠色漸層；0px \~ 30px 由紅色填滿，100px 到最後由綠色填滿： ```css background: linear-gradient(red 30px, green 100px); ``` 示意圖：

3、30px 到 100px 由紅色變到綠色；100px 到 250px 由綠色變到黃色：(推理方式同上) ```css background: linear-gradient(red 30px, green 100px, yellow 250px); ``` 示意圖：

範例： {% embed url="" %} ## 一個區域可以疊多張背景圖可以直接參考[這個例子](https://www.w3schools.com/css/tryit.asp?filename=trycss3_background_multiple)，即各屬性值以半形逗號做區隔。 ## 其它資源 [uiGradients](https://uigradients.com/#Vasily) [Gradient CSS Generator](https://www.cssmatic.com/gradient-generator) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.webmix.cc/html-and-css/3.-css/3.13-bei-jing.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.