background-color

The background-color CSS property sets the background color of an element.

试试

语法

css
/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00; /* Fully opaque */
background-color: #bf0; /* Fully opaque shorthand */
background-color: #11ffee00; /* Fully transparent */
background-color: #1fe0; /* Fully transparent shorthand */
background-color: #11ffeeff; /* Fully opaque */
background-color: #1fef; /* Fully opaque shorthand */

/* RGB value */
background-color: rgb(255 255 128); /* Fully opaque */
background-color: rgb(117 190 218 / 50%); /* 50% transparent */

/* HSL value */
background-color: hsl(50 33% 25%); /* Fully opaque */
background-color: hsl(50 33% 25% / 75%); /* 75% opaque, i.e. 25% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: revert-layer;
background-color: unset;

The background-color property is specified as a single <color> value.

值

<color>

背景的统一颜色。它呈现在任何指定的 background-image 后面，尽管颜色仍将通过图像中的任何透明度显示。

无障碍

重要的是要确保背景颜色与放置在其上的文本颜色之间的对比度足够高，以使有视力障碍的人能够阅读网页内容。

颜色对比度是通过比较文本和背景颜色值的亮度来确定的。为了满足当前的 Web 内容无障碍指南 (WCAG)，文本内容需要 4.5:1 的比例，而较大的文本（如标题）需要 3:1 的比例。较大的文本定义为 18.66px 和 粗体 或更大，或 24px 或更大。

正式定义

初始值transparent
适用于所有元素。它也适用于 ::first-letter 和 ::first-line.
继承否
计算值计算颜色
动画类型a color

正式语法

background-color = 
  <color>

例子

对盒子进行着色

此示例演示了使用不同的 CSS <color> 值将 background-color 应用于 HTML <div> 元素。

HTML

html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>

CSS

css
.exampleone {
  background-color: transparent;
}

.exampletwo {
  background-color: rgb(153 102 153);
  color: rgb(255 255 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}

结果

对表格进行着色

此示例演示了在 HTML <table> 元素上使用 background-color，包括 <tr> 行和 <td> 单元格。

HTML

html
<table>
  <tr id="r1">
    <td id="c11">11</td>
    <td id="c12">12</td>
    <td id="c13">13</td>
  </tr>
  <tr id="r2">
    <td id="c21">21</td>
    <td id="c22">22</td>
    <td id="c23">23</td>
  </tr>
  <tr id="r3">
    <td id="c31">31</td>
    <td id="c32">32</td>
    <td id="c33">33</td>
  </tr>
</table>

CSS

css
table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}
td {
  border: solid 1px black;
}
#r1 {
  background-color: lightblue;
}
#c12 {
  background-color: cyan;
}
#r2 {
  background-color: grey;
}
#r3 {
  background-color: olive;
}

结果

规范

规范
CSS 背景和边框模块级别 3
# background-color

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅