黑马程序员技术交流社区

标题: 【广州PHP】CSS3 RGBA颜色值 [打印本页]

作者: gz_xudada 时间: 2018-8-24 22:23
标题: 【广州PHP】CSS3 RGBA颜色值
本帖最后由 gz_xudada 于 2018-8-24 22:27 编辑

CSS3 RGBA颜色值

RGBA是在RGB的升级版，通过增加一个参数来控制透明度，在应用上给我提供了更大的便利.

语法结构

RGBA与RGB相比，新增一个参数A（alpha），它可以控制透明度(0~1之间).

参数解折

R(red):红色值取值:正整数|百分数.
G(green):绿色值取值:正整数|百分数.
B(blue):蓝色值取值:正整数|百分数.
A(Alpha):Alpha透明度，取值0 ~ 1之间，0表示完全透明，1表示完全不透明.

注意:

   R、G、B三个参数的正整数取值是0 ~ 255，百分比取值是0% ~ 100%.
      超出范围的数值将被截至其最接近的取值极限，参数A的取值在0~1之间.
      需要特别注意的是，并非所有的浏览器都支持百分数参数值.

浏览器支持

1.IE9+浏器支持属性值.

2.edge浏览器支持此属性值.

3.火狐浏览器支持此属性值.

4.谷歌浏览器支持此属性值.

5.opera浏览器支持此属性值.

6.safria浏览器支持此属性值.

实例代码

案例1:设置字体颜色

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>rgba设置字体颜色</title>

    <style type="text/css">

        /*

            color属性是css中设置字体颜色

            font-size属性设置字体大小

        */

        .first{

            color:rgba(255,128,0,0.2);

            font-size:50px;

        }

        .second{

            color:rgba(90%,70%,50%,0.8);

            font-size:50px;

        }

        .third{

            color:rgba(160,255,150,.6);/*0.6也可以写成.6*/

            font-size:50px;

        }

    </style>

</head>

<body>

    <div class="first">传智播客</div>

    <div class="second">传智播客</div>

    <div class="third">传智播客</div>

</body>

</html>

效果:

案例2:设置背景颜色

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>rgba设置字体颜色</title>

    <style type="text/css">

        /*

            color属性是css中设置字体颜色

            font-size属性设置字体大小

        */

        .first{

            color:rgba(255,128,0,0.2);

            font-size:50px;

        }

        .second{

            color:rgba(90%,70%,50%,0.8);

            font-size:50px;

        }

        .third{

            color:rgba(160,255,150,.6);/*0.6也可以写成.6*/

            font-size:50px;

        }

    </style>

</head>

<body>

    <div class="first">传智播客</div>

    <div class="second">传智播客</div>

    <div class="third">传智播客</div>

</body>

</html>

效果图:

注意:使用RGBA设置元素背景透明度不会影响内容的透明度,与opacity属性设置不同!

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2