试一试
background-color: brown;
background-color: #74992e;
background-color: rgb(255 255 128);
background-color: rgb(255 255 128 / 0.5);
background-color: hsl(50 33% 25%);
background-color: hsl(50 33% 25% / 0.75);
<section id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#example-element {
min-width: 100%;
min-height: 100%;
padding: 10%;
}
语法
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;
background-color 属性被指定为单个 <color> 值。
值
<color>-
背景的统一颜色。它呈现在任何指定的
background-image后面，尽管颜色仍会透过图像的任何透明部分可见。
无障碍
重要的是，要确保背景颜色与放置在其上的文本颜色之间的对比度足够高，以便有低视力障碍的人能够阅读页面内容。
颜色对比度是通过比较文本和背景颜色值的亮度来确定的。为了满足当前的 Web 内容可访问性指南 (WCAG)，文本内容需要 4.5:1 的比率，对于标题等较大文本需要 3:1 的比率。大文本定义为 18.66 像素及更粗的 粗体，或 24 像素及更大。
正式定义
| 初始值 | transparent |
|---|---|
| 应用于 | 所有元素。也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 否 |
| 计算值 | computed color |
| 动画类型 | 一种颜色 |
正式语法
background-color =
<color>
示例
给方框上色
此示例演示了如何使用不同的 CSS <color> 值将 background-color 应用于 HTML <div> 元素。
HTML
html
<div class="example-one">Lorem ipsum dolor sit amet, consectetuer</div>
<div class="example-two">Lorem ipsum dolor sit amet, consectetuer</div>
<div class="example-three">Lorem ipsum dolor sit amet, consectetuer</div>
CSS
css
.example-one {
background-color: transparent;
}
.example-two {
background-color: rgb(153 102 153);
color: rgb(255 255 204);
}
.example-three {
background-color: #777799;
color: white;
}
结果
给表格上色
此示例演示了在 HTML <table> 元素（包括 <tr> 行和 <td> 单元格）上使用 background-color。
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 Backgrounds and Borders Module Level 3 # background-color |
浏览器兼容性
加载中…