CSS的background-color属性用于为元素的整个背景设置纯色。
属性值
它使用各种设置背景颜色颜色值，例如预定义的颜色名称（例如"red"、"blue"、"gree"）、十六进制颜色代码（例如"#FF0000"、"#0000FF"）、RGB 颜色值（例如"rgb( 255, 0, 0)") 或 HSL 颜色值（例如，"hsl(0, 100%, 50%)"）。
<color>:任何有效格式的任何颜色值。
适用范围
所有 HTML 元素。
语法
关键字值
background-color: red;
background-color: indigo; 十六进制值
background-color: #bbff00;
background-color: #bf0;
background-color: #11ffee00;
background-color: #1fe0;
background-color: #11ffeeff;
background-color: #1fef; RGB 值
background-color: rgb(255 255 128);
background-color: rgb(117 190 218 / 50%); HSL 值
background-color: hsl(50 33% 25%);
background-color: hsl(50 33% 25% / 75%); 特殊关键字值
background-color: currentcolor;
background-color: transparent; CSS background-color: <color>
以下示例演示使用不同 CSS 背景颜色的不同背景颜色颜色名称、RGB、RGBA、HSL、HSLA、透明等值 -
<html>
<head>
<style>
div {
display: inline-block;
border: 1px solid black;
height: 100px;
width: 100px;
}
.color-name {
background-color: lightblue;
}
.rgb {
background-color: rgb(231, 181, 181);
}
.rgba {
background-color: rgba(149, 224, 149,0.8);
}
.hsl {
background-color: hsl(50 33% 25%);
}
.hsla {
background-color: hsla(50 33% 25% / 0.25);
}
.transparent {
background-color: transparent;
}
</style>
</head>
<body>
<h2>background-color</h2>
<div class="color-name">
<h3>color name</h3>
</div>
<div class="rgb">
<h3>rgb value</h3>
</div>
<div class="rgba">
<h3>rgba value</h3>
</div>
<div class="hsl">
<h3>hsl value</h3>
</div>
<div class="hsla">
<h3>hsla</h3>
</div>
<div class="transparent">
<h3>transparent</h3>
</div>
</body>
</html>