区分rgba()和opacity

原创 2018年04月17日 13:56:43

R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数

A:Alpha透明度。取值0~1之间。取值 为0表示完全透明,取值为1时表示完全不透明。

rgba()和opacity都能实现透明效果,但区别在于

rgba()只作用于元素自身的颜色或背景色,对元素的内容没有影响;

opacity在作用于元素自身的颜色或背景色的同时,也作用于元素内的内容的透明度

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .rgba{
            width:200px;
            height:200px;
            background: rgba(255,0,0,0.5);
        }
        .opacity{
            margin-top: 20px;
            width:200px;
            height:200px;
            background: red;
            opacity: 0.5;
        }
    </style>
</head>
<div class="rgba">rgba</div>
<div class="opacity">opacity</div>
</body>
</html>

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yingleiming/article/details/79973886

rgba()和opacity的比较

rgba()和opacity的比较这段时间我想用opacity给背景加个透明度,但是发现它里面的子元素也继承了;如果你只是想给遮罩层加个透明度(就像优酷登陆时弹出的遮罩层上面是登陆框,如果登陆框也透明...
  • u014150409
  • u014150409
  • 2015-04-06 21:57:15
  • 1514

CSS:透明度 opacity与rgba()的区别

在对元素进行透明度的设置时,经常用到的有opacity与background-color:rgba()。那么,它们到底有啥区别呢? 在使用opacity时,处了对背景生效之外,应用它的元素的内容也会...
  • u010703975
  • u010703975
  • 2015-10-22 17:23:53
  • 1139

设置元素透明,opacity与rgba的区别

opacity会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性 background: rgba(255,255,255,0.8); filter:...
  • u012546027
  • u012546027
  • 2016-07-03 15:42:20
  • 418

rgba()和opacity的透明效果有什么不同?

这是中移物联网面试的时候问过的一个问题,刚刚看见才想起来。与大家分享一下,同时也是一个很好的技巧! rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的...
  • sindlly
  • sindlly
  • 2015-09-22 15:11:05
  • 1029

HTML5 rgba与opacity的属性 兼容ie6/7/8/9各浏览器

在css3之前,在样式中指定的颜色值只能为RGB颜色值,并且只能通过opacity属性来设置元素的透明度。CSS3中增加了3种颜色值-RGBA颜色值,HSL颜色值及HSLA颜色值,并且允许通过对RGB...
  • zxjiayou1314
  • zxjiayou1314
  • 2015-05-24 02:32:36
  • 1092

其中的opacity 和 rgba设置背景透明度的用法和区别

(1)区别:其中opacity会影响文字的透明度的,而rgba只是改变背景的透明度的 (2)用法:            (a)其中opacity的用法比较简单,你只需要设置它的值就可以了。其中的...
  • liying123466
  • liying123466
  • 2017-04-23 12:15:39
  • 230

ie6-ie8不支持opacity,rgba解决方法

半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常。 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filte...
  • qq_30325409
  • qq_30325409
  • 2016-11-01 14:24:14
  • 761

opacity/rgba()设置透明度问题

设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度。其中文字也会出现透明度,一般通过将文字放置在一个单独中,在通过绝对定位来控制位置:div{ o...
  • ymc_webpack
  • ymc_webpack
  • 2017-02-13 14:53:20
  • 194

CSS3的rgba、opacity和filter的区别和详解

转载请注明预见才能遇见的博客:http://my.csdn.net/ 原文地址: CSS3的rgba、opacity和filter的区别和详解 1.RGBA的详细解释,rgba(r,g,b,a) 取...
  • pcaxb
  • pcaxb
  • 2017-02-21 15:09:05
  • 674
收藏助手
不良信息举报
您举报文章:区分rgba()和opacity
举报原因:
原因补充:

(最多只允许输入30个字)