背景缩写 ( 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 是相当方便好用的样式，使用时只需要注意一些细节规则，就可以大幅减少背景图样式的程序码。

意见反馈