大家好，我是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
--------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
网友评论