CSS 背景

CSS 背景屬性用于定義元素的背景效果。

在這些章節中，您將學習如下 CSS 背景屬性：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color 屬性指定元素的背景色。

實例

頁面的背景色設置如下：

body {
  background-color: lightblue;
}

親自試一試

通過 CSS，顏色通常由以下方式指定：

  • 有效的顏色名稱 - 比如 "red"
  • 十六進制值 - 比如 "#ff0000"
  • RGB 值 - 比如 "rgb(255,0,0)"

請查看 CSS 顏色值，獲取可能顏色值的完整列表。

其他元素

您可以為任何 HTML 元素設置背景顏色：

實例

在這里，<h1>、<p> 和 <div> 元素將擁有不同的背景色：

h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}

親自試一試

不透明度 / 透明度

opacity 屬性指定元素的不透明度/透明度。取值范圍為 0.0 - 1.0。值越低，越透明：

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

實例

div {
  background-color: green;
  opacity: 0.3;
}

親自試一試

注意：使用 opacity 屬性為元素的背景添加透明度時，其所有子元素都繼承相同的透明度。這可能會使完全透明的元素內的文本難以閱讀。

使用 RGBA 的透明度

如果您不希望對子元素應用不透明度，例如上面的例子，請使用 RGBA 顏色值。下面的例子設置背景色而不是文本的不透明度：

100% opacity
60% opacity
30% opacity
10% opacity

您從我們的 CSS 顏色 章節中學到了可以將 RGB 用作顏色值。除 RGB 外，還可以將 RGB 顏色值與 alpha 通道一起使用（RGBA） - 該通道指定顏色的不透明度。

RGBA 顏色值指定為：rgba(red, green, blue, alpha)。alpha 參數是介于 0.0（完全透明）和 1.0（完全不透明）之間的數字。

提示：您可在我們的 CSS 顏色 一章中學到有關 RGBA 顏色的更多知識。

實例

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的綠色背景 */
}

親自試一試