背景 ( 背景色、背景裁切 )

运用 CSS 的 background-color 样式，可以运用任何支援的色彩单位，将元素的背景指定成特定颜色，这篇教学除了介绍 background-color 的用法，还会介绍 background-clip 裁切背景样式，明确设定背景颜色延伸的范围。

快速导览：

• background-color 撰写语法
• background-color 色彩单位
• 不可置换行内容器的背景色
• 可置换行内容器的背景色
• background-clip 裁切背景

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

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

background-color 撰写语法

background-color 表示元素的“背景色”，可以运用任何支援的色彩单位，将元素的背景指定成特定颜色，background-color 有下列特性：

• 默认状态下，背景色会延伸填满 padding 和 border 空间 ( 容器边框外缘 )。
• 只支援“单色”，不支援渐层色或多种颜色 ( 渐层色使用 background-image )。
• 默认值为“transparent”透明色。
• 在显示阶层中，background-color 会被 background-image 所覆盖。
• 不会继承。

下方的范例会让不同的元素呈现不同的背景色。

线上展示：https://codepen.io/oxxo/pen/KKjwLEQ

<!-- HTML 程式碼 -->
<div></div>
<span>hello oxxo</span>
<table>
  <tr><td>apple</td><td>orange</td></tr>
  <tr><td>coconut</td><td>banana</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 5px;
    width: 100px;
    height: 100px;
    background-color: pink;
  }
  span {
    margin: 5px;
    background-color: orange;
  }
  table {
    margin: 5px;
    padding: 10px;
    background-color: red;  /* 背景色會填滿 padding 空間 */
  }
  table tr td {
    background-color: green;
  }
  table tr:first-child td {
    background-color: cyan;
  }
</style>

如果利用 CSS 的 background 背景样式缩写语法，直接在后方填入色彩单位，效果和 background-color 完全相同。

线上展示：https://codepen.io/oxxo/pen/XWLJwGy

<!-- HTML 程式碼 -->
<div class="a">background-color: orange;</div>
<div class="b">background: orange;</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 240px;
    margin: 10px;
    padding: 20px;
  }
  .a {background-color: orange;}
  .b {background: orange;}
</style>

background-color 色彩单位

background-color 可以使用 CSS 支援的标准色彩单位。

延伸阅读：颜色单位、CSS 函数 ( 色彩模型 )

下方范例使会使用五个 div，分别使用不同色彩单位来呈现背景色。

线上展示：https://codepen.io/oxxo/pen/vYqEwMN

<!-- HTML 程式碼 -->
<div class="a">background-color: orange;</div>
<div class="b">background: #00f6;</div>
<div class="c">background: rgb(0,200,100);</div>
<div class="d">background: hsl(10, 90%, 50%, 0.7);</div>
<div class="e">background: lch(50% 50 180 / 0.3);</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 240px;
    margin: 10px;
    padding: 20px;
    font-size: 14px;
  }
  .a {background-color: orange;}
  .b {background: #00f6;}
  .c {background: rgb(0,200,100);}
  .d {background: hsl(10, 90%, 50%, 0.7);}
  .e {background: lch(50% 50 180 / 0.3);}
</style>

不可置换行内容器的背景色

虽然不可置换行内容器无法调整宽高，但实际的“内容区域”仍然存在 padding 和 border 的空间，因此套用背景颜色时，默认状态下背景颜色仍然会填满这些空间，此外，由于透过“行高”所产生的空间不属于内容区域，就不会填满背景色。

参考：文字行高、文字缩排

下方的范例在两个 div 里放入行内容器元素，如果行内元素具有 padding 和 border，则背景色默认会填满这些区域，如果使用行高产生的空间则不会填满背景色。

线上展示：https://codepen.io/oxxo/pen/yLdyWrj

<!-- HTML 程式碼 -->
<div class="a">
  <span>STEAM 教育學習網透過一系列<strong>免費且高品質</strong>的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
</div>
<div class="b">
  <span>STEAM 教育學習網透過一系列<strong>免費且高品質</strong>的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 240px;
    margin: 30px;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #000;
  }
  strong {background: orange;}
  .a strong {
    padding:20px; 
    border: 10px solid #f005;  /* 利用 padding 和 border 延伸範圍 */
  }
  .b {line-height: 50px;}      /* 利用行高產生空間 */
</style>

可置换行内容器的背景色

网页中的图片元素 img 或 svg 都属于“可置换”行内容器 ( 显示类型大多都是 inline-block )，这些元素在默认状态下 padding 和 border 会向外扩展范围，背景色也就会填满这些范围，又因为 border 在 padding 的外面，和背景色互相搭配下，甚至能做出“双色边框”的有趣效果，如果图片是透明背景，透明区域也会显示背景色。

线上展示：https://codepen.io/oxxo/pen/oNrgRRv

<!-- HTML 程式碼 -->
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
<img class="c" src="https://steam.oxxostudio.tw/download/css/border-svg-2.svg">
    
<!-- CSS 程式碼 -->
<style>
  img {width: 120px;}
  .a {
    border: 10px solid #000;
    padding: 10px;
    background: red;
  }
  .b {
    border: 20px dashed #00f5;
    padding: 5px;
    background: #ff0;
  }
  .c {
    border: 5px double #000;
    padding: 5px;
    background: orange;
  }
</style>

background-clip 裁切背景

在默认状态下，CSS 会让背景色或背景图填满整个容器空间，但透过 background-clip 可以设定“背景”的“填满方式”，这个样式具有下列属性值：

下方范例会展示四种 background-clip 的效果，需要注意如果属性值为 text，表示会填满“文字”，需要使用有透明度的文字，或将文字设为透明色 transparent 才能看见背景。

线上展示：https://codepen.io/oxxo/pen/jOjEooY

<!-- HTML 程式碼 -->
<br>
<div class="a">
  <span>STEAM 教育學習網透過<strong>免費且高品質</strong>的教學與範例。<br>background-clip: border-box;</span>
</div>
<div class="b">
  <span>STEAM 教育學習網透過<strong>免費且高品質</strong>的教學與範例。<br>background-clip: padding-box;</span>
</div>
<div class="c">
  <span>STEAM 教育學習網透過<strong>免費且高品質</strong>的教學與範例。<br>background-clip: content-box;</span>
</div>
<div class="d">
  <span>STEAM 教育學習網透過<strong>免費且高品質</strong>的教學與範例。<br>background-clip: text;</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 300px;
    margin: 10px;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #000;
  }
  strong {
    background: orange;
    padding:20px; 
    border: 10px solid #00f5;
  }
  .a strong {background-clip: border-box;}
  .b strong {background-clip: padding-box;}
  .c strong {background-clip: content-box;}
  .d strong {
    background-clip: text;
    color: transparent;  /* 文字設定為透明 */
  }
</style>

使用 background-clip 搭配其他背景样式时需要注意“顺序”，由于 background 样式属性是“缩写格式”，内容也包含了 background-clip，background-clip 要放在 background 后方，但如果搭配 background-image 则摆在前方后方都可以，下方范例会呈现顺序不同的影响。

线上展示：https://codepen.io/oxxo/pen/raNdOXz

<!-- HTML 程式碼 -->
background-clip 在 background 前方
<h1 class="a">OXXO.STUDIO</h1>
background-clip 在 background 後方
<h1 class="b">OXXO.STUDIO</h1>
background-clip 在 background-image 前方
<h1 class="c">OXXO.STUDIO</h1>
background-clip 在 background-image 後方
<h1 class="d">OXXO.STUDIO</h1>

<!-- CSS 程式碼 -->
<style>
  h1 {
    margin: 10px 0 30px;
    padding: 0;
    width: max-content;
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    font-size: 80px;
    line-height: 1;
    color: #fff3;  /* 文字顏色設定為透明 */
  }
  .a {
    background-clip: text;
    background: linear-gradient(#f00 50%, #000 50%);
  }
  .b {
    background: linear-gradient(#f00 50%, #000 50%);
    background-clip: text;
  }
  .c {
    background-clip: text;
    background-image: linear-gradient(#f00 50%, #000 50%);
  }
  .d {
    background-image: linear-gradient(#f00 50%, #000 50%);
    background-clip: text;
  }
</style>

小结

背景色是网页设计里使用频率非常高的样式，不论是分隔区块、按钮效果、互动显示都会需要设定背景色，赶快运用这篇教学所介绍的内容，替网页元素增添多一些背景色吧！

意见反馈