背景顏色

background-color 屬性使用顏色值或通過關鍵字（如 transparent，inherit 或 initial）設定元素的背景顏色。

• transparent ，指定背景顏色應該是透明的。這是預設的。

• 繼承，從其父元素繼承此屬性。

• initial ，將此屬性設定為其預設值。

這可以應用於所有元素，以及::first-letter / ::first-line 偽元素 。

CSS 中的顏色可以通過不同的方法指定。

顏色名稱

CSS

div {
  background-color: red;  /* red */
} 

HTML

<div>This will have a red background</div>

• 上面使用的示例是 CSS 必須表示單一顏色的幾種方法之一。

十六進位制顏色程式碼

十六進位制程式碼用於表示基本 16 位十六進位制表示法的顏色的 RGB 分量。例如，#ff0000 是亮紅色，其中顏色的紅色分量是 256 位（ff），並且顏色的相應綠色和藍色部分是 0(00)。

如果三個 RGB 配對（R，G 和 B）中的每一箇中的兩個值相同，則顏色程式碼可以縮短為三個字元（每個配對的第一個數字）。#ff0000 可以縮短為 #f00，#ffffff 可以縮短為 #fff。

十六進位制表示法不區分大小寫。

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

宣告顏色的另一種方法是使用 RGB 或 RGBa。

RGB 代表紅色，綠色和藍色，需要三個單獨的 0 到 255 之間的值，放在括號之間，分別對應紅色，綠色和藍色的十進位制顏色值。

RGBa 允許你在 0.0 和 1.0 之間新增額外的 alpha 引數以定義不透明度。

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

宣告顏色的另一種方法是使用 HSL 或 HSLa，類似於 RGB 和 RGBa。

HSL 代表色調，飽和度和亮度，通常也稱為 HLS：

• 色調是色輪上的度數（從 0 到 360）。
• 飽和度是 0％到 100％之間的百分比。
• 亮度也是 0％和 100％之間的百分比。

HSLa 允許你在 0.0 和 1.0 之間新增額外的 alpha 引數以定義不透明度。

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

與背景影象的互動

以下陳述都是等效的：

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

它們都將導致影象下方顯示紅色，影象的部分是透明的，或影象未顯示（可能是由於 background-repeat）。

請注意，以下內容不等同於：

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

在這裡，background 的價值超越你的 background-image。

有關 background 屬性的更多資訊，請參閱背景速記