CSS 背景
CSS background 屬性用於為元素新增背景效果。
在本章中，您將學習以下 CSS 背景屬性
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(簡寫屬性)
CSS background-color
background-color 屬性指定元素的背景顏色。
使用 CSS，顏色通常透過以下方式指定
- 一個有效的顏色名稱 - 例如“red”
- 一個 HEX 值 - 例如“#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
注意： 當使用 opacity 屬性為元素的背景新增透明度時，其所有子元素將繼承相同的透明度。這可能導致完全透明元素中的文字難以閱讀。
使用 RGBA 實現透明度
如果您不想像上面的示例那樣將透明度應用於子元素，請使用 RGBA 顏色值。以下示例為背景顏色設定了透明度，而不是文字
100% 不透明度
60% 不透明度
30% 不透明度
10% 不透明度
您在我們 CSS 顏色章節中瞭解到，可以使用 RGB 作為顏色值。除了 RGB，您還可以使用帶有 alpha 通道（RGBA）的 RGB 顏色值，它指定顏色的不透明度。
RGBA 顏色值使用以下方式指定：rgba(red, green, blue, alpha)。alpha 引數是一個介於 0.0（完全透明）和 1.0（完全不透明）之間的數字。
提示： 您將在我們的 CSS 顏色章節 中瞭解更多關於 RGBA 顏色的資訊。
CSS 背景顏色屬性
| 屬性 | 描述 |
|---|---|
| background-color | 設定元素的背景顏色 |
影片：CSS 背景顏色
