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

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

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【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/...

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

密码：ijun