CSS background 背景縮寫格式

透過 CSS 設定元素背景時，除了一個個的設定每種背景樣式，也可使用「縮寫格式」設定背景，這篇教學會介紹如何使用背景縮寫格式 background 設定元素背景。

快速導覽：

• 使用 background
• background 設定多重背景

教學影片

搭配教學影片一起閱讀，效果會更好！歡迎大家訂閱 STEAM 教育學習網的 Youtube 頻道。

前往：https://www.youtube.com/@steam.oxxostudio

使用 background

background 可以設定元素的「背景顏色」和「背景圖」，沒有繼承特性，使用 background 相當方便，可以不按照順序使用背景圖的樣式，但因為部分樣式屬性的屬性值會重複，所以有下列的幾個注意事項：

• 使用 background-size 和 background-position：
  • 只有一個數值 ( 長度數值 ) 代表 background-position 屬性值。
  • 同時使用兩個屬性值，第一個是 background-position，第二個是background-size ，並使用「/」分隔。
• 使用 background-origin 和 background-clip：
  • 只有一個屬性值代表 background-origin。
  • 同時使用兩個屬性值，第二個是 background-clip。
• 使用 background-color 背景色一定位於背景圖下層。
• 使用 background 可能會覆蓋掉對應的背景圖樣式。
  • 其他背景樣式也可能會覆蓋 background 裡對應的樣式。
• 不支援 background-blend-mode。

下方列出一些符合規範的 background 寫法：

div {
  background: red;  
  /* 等同 */
  /* background-color: red */

  background: red url("圖片網址");
  /* 等同 */
  /* background-color: red; */
  /* background-image: url("圖片網址"); */

  background: red url("圖片網址") space;
  /* 等同 */
  /* background-color: red; */
  /* background-image: url("圖片網址"); */
  /* background-repeat: space; */

  background: red url("圖片網址") space padding-box;
  /* 等同 */
  /* background-color: red; */
  /* background-image: url("圖片網址"); */
  /* background-repeat: space; */
  /* background-origin: padding-box; */

  background: red url("圖片網址") space padding-box padding-box;
  /* 等同 */
  /* background-color: red; */
  /* background-image: url("圖片網址"); */
  /* background-repeat: space; */
  /* background-origin: padding-box; */
  /* background-clip: padding-box; */

  background: red url("圖片網址") space padding-box padding-box top right;
  /* 等同 */
  /* background-color: red; */
  /* background-image: url("圖片網址"); */
  /* background-repeat: space; */
  /* background-origin: padding-box; */
  /* background-clip: padding-box; */
  /* background-position: top right; */

  background: red url("圖片網址") space padding-box padding-box top right/50%;
  /* 等同 */
  /* background-color: red; */
  /* background-image: url("圖片網址"); */
  /* background-repeat: space; */
  /* background-origin: padding-box; */
  /* background-clip: padding-box; */
  /* background-position: top right; */
  /* background-size: 50%; */

  background: red url("圖片網址") space padding-box padding-box top right/50% fixed;
  /* 等同 */
  /* background-color: red; */
  /* background-image: url("圖片網址"); */
  /* background-repeat: space; */
  /* background-origin: padding-box; */
  /* background-clip: padding-box; */
  /* background-position: top right; */
  /* background-size: 50%; */
  /* backgroud-attachment: fixed; */
}

使用 background 會根據權重規則，覆蓋對應的樣式或被對應的樣式覆蓋，下方的範例會使用 background 樣式覆蓋 background-size 樣式 ( cover 變成 30% )，接著再透過 background-color 覆蓋 background 裡的背景色 ( 紅色變成黃色 )。

線上展示：https://codepen.io/oxxo/pen/xxoOGMr

<!-- HTML 程式碼 -->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    background-size: cover;
    background: red top left/30% round url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png");
    background-color: yellow;
  }
</style>

background 設定多重背景

background 也可以設定「多重背景」，使用方式與背景圖的多重背景相同，使用「逗號 ,」分隔不同的背景，不同背景之間屬性不會互相影響，例如第一張圖使用 no-repeat 而第二張圖沒有設定，則第二張圖會使用預設值 repeat，此外，使用時需要注意，只要某一項背景寫錯，就會發生樣式錯誤而無法顯示背景。

特別注意，「背景顏色只能出現一次」，如果多重背景的屬性值組合中出現了背景色，這個屬性值組合且必須出現在多重背景的「最後一項」。

下方的範例會使用 background 呈現多重背景的效果。

線上展示：https://codepen.io/oxxo/pen/OJeXVdd

<!-- HTML 程式碼 -->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    background: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png") no-repeat center/60%, 
      top left/20% space url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png"),
      red top left/5% space url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png");
  }
</style>

小結

背景縮寫格式 background 是相當方便好用的樣式，使用時只需要注意一些細節規則，就可以大幅減少背景圖樣式的程式碼。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～