CSS RGBA - 绿叶网

CSS RGBA 语法

在 CSS 中，RGB 是一种色彩标准，它由红（Red）、绿（Green）、蓝（Blue）3 种颜色变化来得到各种颜色。而 RGBA，说白了就是在 RGB 基础上增加了一个透明度通道 Alpha。

语法：

rgba(R, G, B, A)

说明：

R，指的是红色值（Red）；G，指的是绿色值（Green）；B，指的是蓝色值（Blue）；A，指的是透明度（Alpha）。

R、G、B 这三个可以为整数，取值范围为 0~255。也可以为百分比，取值范围为 0%~100%。参数 A 为透明度，它的取值与 opacity 属性是一样的，取值范围为 0.0~1.0。

下面 2 种有关 RGBA 颜色的写法都是正确的：

/* 写法 1 */
rgba(255, 255, 0, 0.5)

/* 写法 2 */
rgba(50%, 80%, 50%, 0.5)

提示: 小伙伴们可以把 rgba() 函数看成是 “rgb() 函数的扩展版”。

CSS RGBA 示例

接下来，我们通过几个简单的例子来讲解 CSS RGBA 是如何使用的。

示例 1：background-color 取值为 RGBA

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * { padding: 0; margin: 0; }
        ul {
            display: inline-block;
            list-style-type: none;
            width: 200px;
        }
        li {
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
        /* 第 1 个 li，透明度为 1.0 */
        li:nth-child(1) {
            background-color: rgba(255, 0, 0, 1.0);
        }
        /* 第 2 个 li，透明度为 0.6 */
        li:nth-child(2) {
            background-color: rgba(255, 0, 0, 0.6);
        }
        /* 第 3 个 li，透明度为 0.3 */
        li:nth-child(3) {
            background-color: rgba(255, 0, 0, 0.3);
        } 
    </style>
</head>
<body>
    <ul>
        <li>绿叶网</li>
        <li>绿叶网</li>
        <li>绿叶网</li>
    </ul>
</body>
</html>

页面效果如下图所示。

background-color 取值为 RGBA

分析：

在上面例子中，我们定义背景颜色 background-color 为 RGBA 颜色，因此 RGBA 颜色中的透明度也只是针对元素的背景颜色，而不会改变元素内部文本的透明度。那么如果定义字体颜色 color 为 RGBA 颜色，那又会怎样呢？请看下面例子。

示例 2：color 取值为 RGBA

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * { padding: 0; margin: 0; }
        ul {
            display: inline-block;
            list-style-type: none;
            width: 200px;
        }
        li {
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            background-color: skyblue;    /* 设置一个背景色，以便观察透明效果 */
        }
        /* 第 1 个 li，透明度为 1.0 */
        li:nth-child(1) {
            color: rgba(255, 0, 0, 1.0);
        }
        /* 第 2 个 li，透明度为 0.6 */
        li:nth-child(2) {
            color: rgba(255, 0, 0, 0.6);
        }
        /* 第 3 个 li，透明度为 0.3 */
        li:nth-child(3) {
            color: rgba(255, 0, 0, 0.3);
        } 
    </style>
</head>
<body>
    <ul>
        <li>绿叶网</li>
        <li>绿叶网</li>
        <li>绿叶网</li>
    </ul>
</body>
</html>

页面效果如下图所示。

color 属性取值为 rgba

分析：

在这个例子中，我们定义字体颜色 color 为 RGBA 颜色，因此 RGBA 颜色中的透明度也只是针对内部文本的颜色，而不会改变元素背景颜色的透明度。

从上面两个例子我们可以知道，RGBA 中的透明度只会针对当前设置的属性起作用。

示例 3：RGBA 颜色和 opacity 属性比较

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * { padding: 0; margin: 0; }
        ul {
            display: inline-block;
            list-style-type: none;
            width: 200px;
        }
        li {
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
        /* 第 1 个 li 使用 rgba*/
        li:first-child {
            background-color: rgba(255, 0, 0, 0.6);
        }
        /* 第 2 个 li 使用 opacity */
        li:nth-child(2) {
            background-color: rgb(255, 0, 0);
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <ul>
        <li>绿叶网</li>
        <li>绿叶网</li>
    </ul>
</body>
</html>

页面效果如下图所示。

RGBA 颜色和 opacity 属性的比较

分析：

从上面例子可以清楚看出来，如果对某个元素使用 opacity 属性，则该元素中的所有的子元素以及文本内容都会受到影响。

rgba() 与 opacity 这 2 个是两个不同的属性，它们之间的区别如下：

opacity：会影响整个元素及其所有后代元素的透明度。
rgba()：只影响使用该属性的元素的透明度，不会影响其后代元素。

注意: 很多初学的小伙伴在尝试改变某个元素透明度时，大多数都是用 opacity 属性来处理。然后查看浏览器效果时，却发现文字的透明度也被改变了（本来是不想改变文字透明度的）！然后在那里苦恼半天都没找到解决方法。基本每一个从事前端开发的小伙伴都被这个问题困扰过。实际上，我们使用 RGBA 颜色来代替 opacity 属性，就可以轻松实现了。