精华内容
下载资源
问答
  • rgba和opacity的区别

    2019-02-28 18:05:08
    rgba()和opacity都能实现透明效果,取值0~1之间。取值 为0表示完全透明,取值为1时表示完全不透明。但区别在于: rgba()只作用于元素自身颜色或背景色,对元素内容没有影响; opacity在作用于元素自身颜色或...

    rgba()和opacity都能实现透明效果,取值0~1之间。取值 为0表示完全透明,取值为1时表示完全不透明。但区别在于:
    rgba()只作用于元素自身的颜色或背景色,对元素的内容没有影响;
    opacity在作用于元素自身的颜色或背景色的同时,也作用于元素内的内容的透明度

    展开全文
  • RGBA opacity的区别

    2017-09-15 14:58:00
    两者都可以设置透明度 区别 RGBA 只影响当前元素 opacity 后代会继承该css 值,暂时还没有办法清除该css 在线演示 转载于:https://www.cnblogs.com/yoable/p/7526479.html...

    两者都可以设置透明度

    区别
    • RGBA 只影响当前元素
    • opacity 后代会继承该css 值,暂时还没有办法清除该css

    在线演示

    转载于:https://www.cnblogs.com/yoable/p/7526479.html

    展开全文
  • 对于设置透明度,我们有两个可以选的css3属性:rgba 和 opacity。这篇文章主要介绍了详解css透明度之rgba和opacity的区别及兼容,感兴趣的可以一起跟随小编来了解一下
  • RGBA和OPACITY的区别&DISPLAY和VISIBILITY的区别 】 大家好,我是IT修真院北京分院第23期的学员郭婷婷,一枚正直纯洁善良的WEB前端程序员。 今天给大家分享一下,修真院官网CSS任务7中涉及的关于RGBA和OPACITY...

    这里是修真院前端小课堂,每篇分享文从

    【RGBA和OPACITY的区别&DISPLAY和VISIBILITY的区别 】

    大家好,我是IT修真院北京分院第23期的学员郭婷婷,一枚正直纯洁善良的WEB前端程序员。

    今天给大家分享一下,修真院官网CSS任务7中涉及的关于RGBA和OPACITY的透明效果有何不同以及DISPLAY:NONE和VISIBILITY:HIDDEN的区别。

    小课堂【北京第202期】

    分享人:郭婷婷

    1.背景介绍

    1.1 RGBA && OPACITY

    最开始接触rgba和opacity是任务七中要求游戏结果页面页脚的底色为半透明,但里面的按钮不会跟着半透明。开始觉得很简单, 之前在看教程时看到图片透明教程,使用的是CSS3 新属性 opacity,如下图:

    原图

    opacity效果

    但是在使用后发现子元素也被影响,效果如下:

    于是,更换了另一种方案,rgba,无论如何设置父级元素的透明度,子元素的背景色的透明度保持不变,效果如下:

    二、DISPLAY:NONE && VISIBILITY:HIDDEN

    同样是在任务七中,出现需要隐藏的元素,于是就开始寻找可以实现效果的代码。 “display:none”和“visibility:hidden”都可以实现,但是他们二者区别在后面阐述。

    2.知识剖析

    一、RGBA

    RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的色彩空间,也就是透明度/不透明度。

    R:红色值。正整数 | 百分数

    G:绿色值。正整数 | 百分数

    B:蓝色值。正整数| 百分数

    A:透明度。取值0~1之间,取值为0,那它就是完全透明的(也就是看不见的),而数值为,1则意味着一个完全不透明的像素

    利用rgba产生渐变的透明效果

    二、OPACITY

    语法: opacity: value|inherit;

    value:规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。

    从父元素继承 opacity 属性的值。

    三、DISPLAY:NONE

    display 属性规定元素应该生成的框的类型。

    值为none,表示元素不会被显示。

    位置也不再被占据。

    四、VISIBILITY:HIDDEN

    visibility 属性规定元素是否可见。

    值为hidden,表示元素不可见。

    但是会占据原有位置。

    3.常见问题

    3.1 RGBA和OPACITY的区别

    3.2 DISPLAY:NONE和VISIBILITY:HIDDEN的区别

    4 解决方案

    4.1 RGBA和OPACITY的区别

    opacity会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性。 即可以单独为被设置的元素设置透明度,而子元素而不受该设置影响。

    4.2 DISPLAY:NONE和VISIBILITY:HIDDEN的区别

    visibility:hidden:隐藏元素并且占据该元素原来的空间。子级设置visible后不受父级影响。

    display:none:隐藏元素但不占据该元素原来的空间。父级设置值为none后,无论子级设置任何值都无法显示。

    正在上传…
    取消
    5.编码实战

    6.扩展思考

    如果给子级的opacity单独设置一个值,可否挣脱父级的束缚?

    给父级元素设置opacity后,子级无论设置何值都会受到父级影响。

    7.参考文献

    参考1:W3school

    8 更多讨论

    (1)如果给子级元素设置display:inline-block,父级设置display:none,结果会如何?

    答:子级元素会消失,只要父节点元素应用了display:none,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事。

    (2)设置全透明后,假设是button元素还可用吗?

    答:设置透明只是肉眼看不到,但是元素还是正常使用。

    (3)渐变透明如何实现?

    利用linear-gradient线性渐变和rgba

    background: linear-gradient(rgba(41,189,224,1), rgba(41,189,224,0.2))

    鸣谢

    感谢大家观看

    BY : 郭婷婷

    PPT链接:https://ptteng.github.io/PPT/PPT/css-07-opacity.html

    视频链接:http://pan.baidu.com/s/1micFOsK

    密码:ijun

    展开全文
  • rgba和opacity的区别及应用

    千次阅读 2017-12-21 11:45:05
    一、rgba和opacity的区别 话不多说,先看代码,同样设置背景透明度,写法1: background: rgb(0,0,0); opacity: 0.5; 写法2: background: rgba(0,0,0,0.5); 不同之处在于,opacity属性的值,可以被其子...

    一、rgba和opacity的区别
    话不多说,先看代码,同样设置背景透明度,写法1:
    background: rgb(0,0,0);
    opacity: 0.5;
    可以看到不仅背景有透明的效果,包括里面的文字,还有图片都出现了透明的效果

    写法2: background: rgba(0,0,0,0.5);
    只有背景有透明效果

    不同之处在于,opacity属性的值,可以被其子元素继承,给父级div设置opacity属性,那么所有子元素都会继承这个属性,而RGBA设置的元素的后代不会继承该属性及属性值。

    二、opacity和rgba属性的应用:
    页面上要显示pop弹窗时,弹窗后面需要有一个mask遮罩遮住页面的内容,这个时候可以将遮罩div放在内容的同级

    <body>
         <div id="wrap">内容区域</div>
         <div class="pop"></div>  
         <div class="mask"></div>  
    </body>
    .mask{
        position : fixed;
        width: 100%;
        height: 100%;
        z-index : 99;
        background : #000;
        opacity : 0.5;
        top : 0;
        left : 0;
    }

    由于遮罩和内容区域是在同一级div上,而且设置了position属性值及层叠属性z-index,所以不管是用opacity还是rgba,都可以实现透明遮罩完全遮盖内容区域

    在平时应用中,如果需要元素背景,以及元素里面的文字、子元素的文字等等有透明效果,则用opacity属性,只需要背景的透明色,则对背景设置rgba

    展开全文
  • rgba和opacity 的区别: 两者都可以设置透明度 rgba(red,green,blue,transparent); opacity:0~1 0代表全透明,1代表不透明 rgba只让当前颜色透明;而opacity可以让元素包括元素内部所有与颜色相关的都透明 ...
  • css透明度之rgba和opacity的区别及兼容(转发) 对于设置透明度,我们有两个可以选的css3属性:rgba和opacity opacity 用法: #box{ background-color:rgb(125,25,0); opacity: 0.5 } IE9, Firefox, Chrome,...
  • 当您想创建一个覆盖图片标题,图片能透过标题显示,且标题文本显示不受影响,此时应该使用RGBA修改标题背景色透明度;另一方面,当您想要创建一个动画效果,让整个UI元素从完全隐藏到可见,此时应该使用不透明...
  • rgba:  使用方式:rgba(255, 255, 255, .5) 最后一个参数表示透明度取值范围 0 ~1  只作用于元素颜色或其背景色。 opacity :  使用方式:opacity : .5 ; 参数表示透明度取值范围 0 ~1  作用于元素及...
  • 先来简单看看RGBA: 语法 rgba(r,g,b,a) 取值说明 R:红色值。正整数 | 百分数G:绿色值。正整数 | 百分数B:蓝色值。正整数 | 百分数A:Alpha透明度。取值0~1之间。正整数为十进制0~255之间任意值,百分数为0...
  • 对于设置透明度,我们有两个可以选css3属性:rgba opacity opacity 用法: #box{ background-color:rgb(125,25,0); opacity: 0.5 } IE9, Firefox, Chrome, Opera Safari 使用属性opacity来设定透明度。 .....
  • 最近在写代码时候频繁遇到这个问题困扰,今天一次性将我对这两者区别的认知总结在这里:首先说opacity,这是一个css3属性,所以理所应当就存在兼容性问题: 并且需要注意是,设置opacity元素所有后代元素会...
  • rgba和opacity都可以设置元素的透明度。 两者的区别在于opacity会继承父元素的opacity属性,而rgba设置的元素,其后代元素不会继承父元素的不透明属性。 opacity 语法:opacity: value | inherit value...
  • rgba和opacity区别

    2020-07-20 18:02:25
    首先来看rgba: R:红色值。正整数 | 百分数G:绿色值。正整数 | 百分数B:蓝色值。正整数 | 百分数A:Alpha...两者的区别opacity会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性。 ...
  • rgba和opacity有什么区别 opacity属性值,可以被其子元素继承,给父级div设置opacity属性,那么所有子元素都会继承这个属性,并且,该元素及其继承该属性所有子元素所有内容透明度都会改变。 rgba()设置...
  • 如标题所示,今天我们谈谈rgba和opacity有什么区别? 这次我又来做一次搬运工了,哈哈(●’◡’●) RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha色彩空间。 R:红色值。正整数 | 百分数 G :...
  • 主要介绍了css中使用rgba和opacity设置透明度两种方法,通过实例演示解释了两者之间差别,需要朋友可以参考下
  • CSS3的rgbaopacity和filter的区别和详解 1.RGBA的详细解释,rgba(r,g,b,a) 取值说明 R:红色值。正整数 | 百分数 G:绿色值。正整数 | 百分数 B:蓝色值。正整数 | 百分数 A:Alpha透明度。取值0~1之间 正整数为...
  • rgba和opacity的透明效果有什么不同 opacity后代元素会随着一起具有透明性,Opacity中的字随着透明值下降越来越看不清楚,而RGBA不具有这样的问题。 display和visiblity有什么区别 display:通常可以设置为none、...

空空如也

空空如也

1 2 3 4 5 6
收藏数 109
精华内容 43
关键字:

rgba和opacity的区别