html颜色

作者：妳明白莪還在等待嗎？发布日期:2025-02-20 浏览:113

<!DOCTYPE html>
<html>
<head>
    <title>HTML颜色示例</title>
    <style>
        /* 使用颜色名称 */
        .color-name {
            background-color: red;
        }

        /* 使用十六进制值 */
        .hex-value {
            background-color: #00FF00;
        }

        /* 使用RGB值 */
        .rgb-value {
            background-color: rgb(0, 0, 255);
        }

        /* 使用RGBA值（带透明度） */
        .rgba-value {
            background-color: rgba(255, 165, 0, 0.5);
        }

        /* 使用HSL值 */
        .hsl-value {
            background-color: hsl(240, 100%, 50%);
        }
    </style>
</head>
<body>
    <div class="color-name">这是使用颜色名称设置的背景色。</div>
    <div class="hex-value">这是使用十六进制值设置的背景色。</div>
    <div class="rgb-value">这是使用RGB值设置的背景色。</div>
    <div class="rgba-value">这是使用RGBA值设置的背景色，带有透明度。</div>
    <div class="hsl-value">这是使用HSL值设置的背景色。</div>
</body>
</html>

解释说明：

颜色名称：直接使用预定义的颜色名称，如 red。
十六进制值：使用 # 加上六个十六进制字符表示颜色，如 #00FF00 表示绿色。
RGB值：使用 rgb() 函数，传入红、绿、蓝三个通道的值，范围是 0 到 255。
RGBA值：与 RGB 类似，但多了一个透明度参数（alpha），范围是 0 到 1。
HSL值：使用 hsl() 函数，传入色调（hue）、饱和度（saturation）、亮度（lightness）三个参数。

上一篇：html checkbox

下一篇：html 分割线