CSS - background-color 屬性

CSS background-color 屬性用於設定元素整個背景的顏色。

可以使用不同的顏色指定格式，例如：預定義的顏色名稱、十六進位制顏色程式碼、RGB 顏色值等。

語法

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

屬性值

值	描述
color	指定背景顏色。
transparent	指定背景顏色必須透明。這是預設值。
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 值設定背景顏色

我們可以將 rgb 值賦給 background-color 屬性。在下面的示例中使用了“粉紅色”（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 值設定背景顏色

我們可以將 hsl 值賦給 background-color 屬性。在下面的示例中使用了“淺綠色”（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>

設定透明背景顏色

要使背景透明，我們可以將 transparent 值賦給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

列印頁面