CSS - background-color 属性_CSS 菜鸟教程

CSS background-color 属性用于为元素的整个背景设置颜色。

可以使用不同的格式来指定颜色，例如：预定义的颜色名称、十六进制颜色代码、RGB 颜色值等。

语法

background-color: color | transparent | initial | inherit;

属性值

值	描述
color	将指定背景颜色。
transparent	指定背景颜色必须是 trasparent。这是默认值。
initial	将属性设置为其初始值。
inherit	将继承父元素的属性。

背景颜色属性的示例

下面介绍了一些示例，这些示例解释了 background-color 属性的工作原理。已使用不同格式的颜色值。

使用颜色名称设置背景颜色

我们可以直接给 background-color 属性赋予颜色名称。在以下示例中，使用了“红色”。

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 div {
	 	 	 	 	 	 display: inline-block;
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 padding:1%;
	 	 	 	 }

	 	 	 	 .color-name {
	 	 	 	 	 	 background-color: red;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-color Property</h2>
	 	 <div class="color-name">
	 	 	 	 <h3>Tutorialspoint</h3>
	 	 </div>

</body>

</html>

使用 RGB 值设置背景颜色

我们可以为 background-color 属性提供 rgb 值。在以下示例中，使用了“粉红色”颜色（rgb：（201， 76， 76））。

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 div {
	 	 	 	 	 	 display: inline-block;
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 padding:1%;
	 	 	 	 }

	 	 	 	 .rgb-value {
	 	 	 	 	 	 background-color: rgb(201, 76, 76);
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-color Property</h2>
	 	 <div class="rgb-value">
	 	 	 	 <h3>Tutorialspoint</h3>
	 	 </div>
</body>

</html>

使用十六进制值设置背景颜色

我们可以为 background-color 属性提供十六进制值。在以下示例中，使用了“浅蓝色”颜色（六边形：#92a8d1）。

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 div {
	 	 	 	 	 	 display: inline-block;
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 padding:1%;
	 	 	 	 }

	 	 	 	 .hexa-value {
	 	 	 	 	 	 background-color: #92a8d1;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-color Property</h2>
	 	 <div class="hexa-value">
	 	 	 	 <h3>Tutorialspoint</h3>
	 	 </div>
</body>

</html>

使用 HSL 值设置背景颜色

我们可以为 background-color 属性提供 hsl 值。在以下示例中，使用了“浅绿色”颜色（hsl：（89， 43%， 51%））。

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 div {
	 	 	 	 	 	 display: inline-block;
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 padding:1%;
	 	 	 	 }

	 	 	 	 .hsl-value {
	 	 	 	 	 	 background-color: hsl(89, 43%, 51%);
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-color Property</h2>
	 	 <div class="hsl-value">
	 	 	 	 <h3>Tutorialspoint</h3>
	 	 </div>
</body>

</html>

设置透明背景颜色

为了使背景透明，我们可以将透明值分配给 background-color 属性，如以下示例所示。

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 div {
	 	 	 	 	 	 display: inline-block;
	 	 	 	 	 	 border: 1px solid black;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 padding:1%;
	 	 	 	 }

	 	 	 	 .transparent {
	 	 	 	 	 	 background-color: transparent;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-color Property</h2>
	 	 <div class="transparent">
	 	 	 	 <h3>Tutorialspoint</h3>
	 	 </div>

</body>

</html>

支持的浏览器

属性
background-color	43.0	10.0	16.0	9.0	30.0

<< CSS - background-clip 属性 CSS - background-image 属性 >>