背景縮寫格式 background

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

快速導覽：

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

使用 background

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

• 使用 background-size 一定要接在 background-position 之後，且使用「/」分隔，若只有長度數值則表示 background-position 屬性值。
• 出現 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 也可以設定「多重背景」，使用方式與背景圖的多重背景相同，使用「逗號 ,」分隔不同的背景，使用時需要注意，只要某一項背景寫錯，就會發生樣式錯誤而無法顯示背景。

特別注意，「背景顏色只能出現一次」，且必須出現在多重背景的「最後一項」。

下方的範例會使用 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 是相當方便好用的樣式，使用時只需要注意一些細節規則，就可以大幅減少背景圖樣式的程式碼。

意見回饋

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