背景顏色 background-color

運用 CSS 的 background-color 樣式，可以運用任何支援的色彩單位，將元素的背景指定成特定顏色，這篇教學除了介紹 background-color 的用法，還會介紹 background-clip 裁切背景樣式，明確設定背景顏色延伸的範圍。

快速導覽：

• background-color 撰寫語法
• background-color 色彩單位
• 不可置換行內容器的背景色
• 可置換行內容器的背景色
• background-clip 裁切背景

background-color 撰寫語法

background-color 表示元素的「背景色」，可以運用任何支援的色彩單位，將元素的背景指定成特定顏色，background-color 有下列特性：

• 預設背景色會延伸至「容器邊框外緣」。
• 只支援「單色」，不支援漸層色或多種顏色。
• 預設值為「transparent」透明色。
• 在顯示階層中，background-color 會被 background-image 所覆蓋。
• 不會繼承。

下方的範例會讓不同的元素呈現不同的背景色 ( 在預設狀態下，背景色會延伸填滿 padding 空間 )。

線上展示：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>

小結

背景色是網頁設計裡使用頻率非常高的樣式，不論是分隔區塊、按鈕效果、互動顯示都會需要設定背景色，趕快運用這篇教學所介紹的內容，替網頁元素增添多一些背景色吧！

意見回饋

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