rgba中a是指什么

rgba中a是指什么 ?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

荥阳网站建设公司创新互联建站,荥阳网站设计制作,有大型网站制作公司丰富经验。已为荥阳上千提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱,请找那个售后服务好的荥阳做网站的公司定做!

RGBA颜色

RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA说白了,就是在RGB的基础上加了一个透明度通道Alpha。

语法:

rgba(R,G,B,A)

说明:

R:红色值(Red);

G:绿色值(Green);

B:蓝色值(Blue);

A:透明度(Alpha);

R、G、B三个参数可以为正整数,也可以为百分比。正整数值的取值范围为0~255,百分数值的取值范围为0.0%~100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。

参数A为透明度,类似opacity属性,取值范围在0.0~1.0之间,不可为负值。下面是RGBA颜色的正确用法:

rgba(255,255,0,0.5)
rgba(50%,80%,50%,0.5)

举例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 RGBA颜色</title>
    <style type="text/css">
        *{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*/
        li:first-child
        {
            background-color:#FF00FF;
        }
        /*第2个li*/
        li:nth-child(2)
        {
            background-color:rgba(255,0,255,0.5);
        }
        /*第3个li*/
        li:last-child
        {
            background-color:#FF00FF;
            opacity:0.5;
        } 
    </style>
</head>
<body>
    <ul>
        <li>创新互联</li>
        <li>创新互联</li>
        <li>创新互联</li>
    </ul>
</body>
</html>

分析:

十六进制颜色值#FF00FF等价于rgb(255,0,255)。第1个li元素没有使用RGBA颜色值,也没有使用透明度opacity属性;第2个li元素使用RGBA颜色值;第3个li元素使用透明度opacity属性。

大家可以清晰地看出,假如我们对某个元素使用透明度opacity属性,则该元素的内容以及子元素都会受到影响。

从上面的例子我们知道,对于设置元素的透明度,RGBA比透明度opacity属性更好,因为RGBA不会影响元素中的内容以及子元素的不透明度。

感谢各位的阅读!看完上述内容,你们对rgba中a是指什么 大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。

当前文章:rgba中a是指什么
新闻来源:https://www.cdcxhl.com/article48/ppdpep.html

成都网站建设公司_创新互联,为您提供静态网站App开发网站排名电子商务网站设计Google

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都定制网站网页设计