CSS - background-color 属性

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

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

语法

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

属性值

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

背景颜色属性示例

下面描述了一些示例，说明background-color 属性是如何工作的。使用了不同格式的颜色值。

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

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

示例

Open Compiler

<!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 值设置背景颜色

我们可以将 rgb 值赋给 background-color 属性。在下面的示例中使用了“粉红色”（rgb:(201, 76, 76)）。

示例

Open Compiler

<!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）。

示例

Open Compiler

<!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 值设置背景颜色

我们可以将 hsl 值赋给 background-color 属性。在下面的示例中使用了“浅绿色”（hsl:(89, 43%, 51%)）。

示例

Open Compiler

<!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>

设置透明背景颜色

要使背景透明，我们可以将 transparent 值赋给background-color 属性，如下例所示。

示例

Open Compiler

<!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

打印页面