CSS background-color
| 值 | 说明 |
|---|---|
| transparent | 这是默认值，它将背景色定义为透明。这意味着没有背景色。 |
| color | 定义背景色。可以使用颜色名称、十六进制颜色代码、rgb（）、rgba（）、hsl（）、hsla（）。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
语法
background-color: color | transparent | initial | inherit;
背景颜色属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #8ebc42;
}
</style>
</head>
<body>
<h2>Background-color 属性示例</h2>
<p>这里的背景颜色是用十六进制值指定的。</p>
</body>
</html>
我们可以将十六进制、RGB、RGBA、HSL、HSLA 或者颜色名称设置为 background-color 属性的值。
具有“透明”值的背景颜色属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: transparent;
}
</style>
</head>
<body>
<h2>Background-color 属性示例</h2>
<p>在本例中，背景颜色设置为透明transparent。 这是默认值。</p>
</body>
</html>
background-color 属性的动画版本示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #eee;
animation: mymove 5s infinite;
}
@keyframes mymove {
30% {
background-color: #1c87c9;
}
}
</style>
</head>
<body>
<h2> Animation of background-color property</h2>
<p>
在本例中，它逐渐将背景颜色从灰色变为蓝色，然后再变为灰色。
</p>
</body>
</html>
CSS background-color 属性设置元素背景颜色。
元素的背景是它的总大小，包括填充和边框（但不包括边距）。
因此，要设置背景颜色，我们需要选择任何颜色。
我们可以从我们的颜色选择器工具中选择颜色。
颜色可以写成以下类型：颜色名称“red”、十六进制值“#ff0000”和 RGB 值“rgb(255,0,0)”。
重要的是要确保背景颜色与放置在其上的文本颜色之间的对比度足够高，这样视力低下的人也可以阅读页面内容。
| 初始值 | transparent |
|---|---|
| 应用于 | 所有元素。它也适用于：::first-letter 和 ::first-line。 |
| 继承 | 无效 |
| 可动画的 | 可以。背景的颜色是可设置动画的。 |
| 版本 | CSS1 |
| DOM 语法 | object.style.backgroundColor=“#FFFFFF”； |
日期：2020-06-02 22:14:15 来源：oir作者：oir