编辑“︁CSS背景颜色”︁（章节）

= CSS背景颜色 =

'''CSS背景颜色'''是层叠样式表（CSS）中用于设置元素背景色的基础属性。通过该属性，开发者可以为HTML元素指定纯色背景，这是网页视觉设计中最常用的样式之一。

== 基本语法 ==

CSS中使用<code>background-color</code>属性设置背景颜色，其基本语法结构为：

<syntaxhighlight lang="css">
selector {
    background-color: value;
}
</syntaxhighlight>

其中：
* <code>selector</code> - 目标HTML元素的选择器
* <code>value</code> - 颜色值，可以是颜色名称、十六进制码、RGB/RGBA值或HSL/HSLA值

== 颜色值表示方法 ==

CSS背景颜色支持多种颜色表示方式：

=== 1. 颜色名称 ===
CSS预定义了140+种颜色名称（如<code>red</code>, <code>blue</code>等）

<syntaxhighlight lang="css">
div {
    background-color: coral; /* 使用预定义颜色名称 */
}
</syntaxhighlight>

=== 2. 十六进制值 ===
格式为<code>#RRGGBB</code>或<code>#RGB</code>（简写形式）

<syntaxhighlight lang="css">
div {
    background-color: #ff5733; /* 完整形式 */
    background-color: #f53;    /* 简写形式（等同于#ff5533） */
}
</syntaxhighlight>

=== 3. RGB/RGBA值 ===
RGB表示法（Red, Green, Blue），RGBA增加透明度通道

<syntaxhighlight lang="css">
div {
    background-color: rgb(255, 87, 51);    /* 不透明 */
    background-color: rgba(255, 87, 51, 0.5); /* 50%透明度 */
}
</syntaxhighlight>

=== 4. HSL/HSLA值 ===
HSL表示法（Hue, Saturation, Lightness）

<syntaxhighlight lang="css">
div {
    background-color: hsl(16, 100%, 60%);    /* 不透明 */
    background-color: hsla(16, 100%, 60%, 0.3); /* 30%透明度 */
}
</syntaxhighlight>

== 透明背景 ==

CSS提供多种方式实现透明背景：

<syntaxhighlight lang="css">
.transparent {
    background-color: transparent; /* 完全透明 */
}

.semi-transparent {
    background-color: rgba(0, 0, 255, 0.3); /* 30%不透明度的蓝色 */
}
</syntaxhighlight>

== 继承与默认值 ==

* '''默认值'''：<code>transparent</code>（透明）
* '''继承性'''：不继承（子元素不会继承父元素的背景色）

== 浏览器渲染机制 ==

浏览器按照以下步骤渲染背景颜色：
<mermaid>
graph TD
    A[解析HTML] --> B[构建DOM树]
    B --> C[解析CSS]
    C --> D[计算样式]
    D --> E[绘制背景颜色]
    E --> F[合成图层]
</mermaid>

== 实际应用示例 ==

=== 按钮样式 ===
<syntaxhighlight lang="css">
.button {
    background-color: #4CAF50; /* 绿色背景 */
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    border: none;
    border-radius: 4px;
}
</syntaxhighlight>

=== 表格行交替颜色 ===
<syntaxhighlight lang="css">
tr:nth-child(even) {
    background-color: #f2f2f2;
}
tr:nth-child(odd) {
    background-color: #ffffff;
}
</syntaxhighlight>

=== 高亮文本 ===
<syntaxhighlight lang="css">
.highlight {
    background-color: yellow;
    color: black;
}
</syntaxhighlight>

== 高级技巧 ==

=== 背景颜色动画 ===
使用CSS动画改变背景色：

<syntaxhighlight lang="css">
@keyframes color-change {
    0% { background-color: red; }
    50% { background-color: yellow; }
    100% { background-color: green; }
}

.animated-box {
    animation: color-change 4s infinite;
}
</syntaxhighlight>

=== 当前颜色值 ===
使用<code>currentColor</code>关键字使背景色与文本色相同：

<syntaxhighlight lang="css">
div {
    color: blue;
    background-color: currentColor; /* 背景将变为蓝色 */
    opacity: 0.2; /* 添加透明度 */
}
</syntaxhighlight>

=== 混合模式 ===
使用<code>background-blend-mode</code>创建颜色混合效果：

<syntaxhighlight lang="css">
.blend-example {
    background-color: #ff0000;
    background-image: linear-gradient(to right, #0000ff, transparent);
    background-blend-mode: multiply;
}
</syntaxhighlight>

== 性能考虑 ==

* 纯色背景比渐变或图像背景渲染性能更高
* 频繁改变背景色（如动画）可能引起重绘，影响性能
* 在移动设备上，复杂的背景效果可能消耗更多电量

== 浏览器兼容性 ==

所有现代浏览器都完全支持<code>background-color</code>属性，包括：
* Chrome 1+
* Firefox 1+
* Safari 1+
* Edge 12+
* Opera 3.5+
* IE 4+

== 数学基础 ==

颜色转换公式示例（RGB转HSL）：

<math>
\begin{aligned}
&\text{设 } R' = R/255, G' = G/255, B' = B/255 \\
&\text{设 } C_{\text{max}} = \max(R', G', B'), C_{\text{min}} = \min(R', G', B') \\
&\Delta = C_{\text{max}} - C_{\text{min}} \\
&H = \begin{cases}
0^\circ & \text{如果 } \Delta = 0 \\
60^\circ \times \left( \frac{G' - B'}{\Delta} \mod 6 \right) & \text{如果 } C_{\text{max}} = R' \\
60^\circ \times \left( \frac{B' - R'}{\Delta} + 2 \right) & \text{如果 } C_{\text{max}} = G' \\
60^\circ \times \left( \frac{R' - G'}{\Delta} + 4 \right) & \text{如果 } C_{\text{max}} = B'
\end{cases} \\
&L = \frac{C_{\text{max}} + C_{\text{min}}}{2} \\
&S = \begin{cases}
0 & \text{如果 } \Delta = 0 \\
\frac{\Delta}{1 - |2L - 1|} & \text{否则}
\end{cases}
\end{aligned}
</math>

== 常见问题 ==

'''Q: 为什么我的背景颜色没有显示？'''
A: 可能原因：
* 元素没有内容且没有设置宽度/高度
* 存在更高特异性的选择器覆盖了样式
* 父元素的背景色覆盖了子元素

'''Q: 如何实现渐变背景？'''
A: 使用<code>background-image</code>配合<code>linear-gradient()</code>或<code>radial-gradient()</code>函数

'''Q: 背景颜色和背景图片如何共存？'''
A: 可以同时设置，图片会覆盖在颜色上方（除非图片有透明部分）

== 最佳实践 ==

1. 使用有足够对比度的背景色确保可读性
2. 考虑色盲用户，避免仅靠颜色传达信息
3. 在CSS变量中定义主题颜色便于维护
4. 使用开发者工具的颜色选择器调试
5. 对于大面积背景，选择柔和的颜色减少视觉疲劳

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS颜色与背景]]