CSS3中RGBA和opacity的区别

RGBA是什么?

是在RGB<Red(红色) Green(绿色) Blue(蓝色)>的基础上增加了一个通道Alpha。Alpha参数为透明值,在0~1之间。

RGBA 不仅可以用在 background 属性上,还可以用在 color 和 border 属性中。

RGBA和opacity之间的不同点是前者只应用到指定的元素上,后者会影响指定的元素及其子元素。

下面通过实例演示来说明 。

效果展示:


rgba演示.png
<!--HTML部分-->
<div class="demo" id="demo">RGBA测试</div>
<div class="demo" id="demo2">opacity测试</div>
          /*css部分*/ 
            #demo {
                width: 200px;
                height: 100px;
                background: rgba(25, 25, 25, .5);
                margin: 10px;
            }
            
            #demo2 {
                width: 200px;
                height: 100px;
                background: rgb(25, 25, 25);
                opacity: .5;
                margin: 10px;
            }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、HTML5 1.1 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定...
    福尔摩鸡阅读 16,129评论 14 51
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,663评论 0 7
  • 芽抽出的春,嫩绿的色泽,不经意间春来了,暖暖的光,心里也暖暖的!
    冷月凉风阅读 373评论 0 1
  • 《我在未来等你》是刘同继“谁的青春不迷茫”系列之后的首部长篇小说。刘同的每本小说都让我看到了自己,也让我迷茫时找...
    1703鲁雪阅读 10,901评论 0 2
  • 27岁还单身在现代社会来看已是大龄青年,为什么到现在还是单身,家里也反复催促,往往回家或是打电话都是说你看谁...
    chengang123456阅读 153评论 0 0