大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下，修真院官网CSS任务7中涉及的关于RGBA和OPACITY的透明效果有何不同以及DISPLAY:NONE和VISIBILITY：HIDDEN的区别。
小课堂【北京第184期】
分享人：郭婷婷
1.背景介绍
1.1 RGBA && OPACITY
最开始接触rgba和opacity是任务七中要求游戏结果页面页脚的底色为半透明，但里面的按钮不会跟着半透明。开始觉得很简单，因为网上教程原话是“通过 CSS 创建透明图像是很容易的。”“CSS opacity 属性是 W3C CSS 推荐标准的一部分。”定义透明效果的 CSS3 属性是 opacity,如下图：
使用opacity的效果
于是，更换了另一种方法：RGBA
使用RGBA的效果
1.2 DISPLAY:NONE && VISIBILITY:HIDDEN
同样是在任务七中，出现需要隐藏的元素，于是就开始寻找可以实现效果的代码。 “display：none”和“visibility：hidden”都可以实现，但是他们二者区别在后面阐述。
原图
隐藏下面四个图片
2.知识剖析
2.1 RGBA
RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间，也就是透明度/不透明度。
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间,取值为0，那它就是完全透明的（也就是看不见的），而数值为,1则意味着一个完全不透明的像素。
2.2 OPACITY
语法： opacity: value|inherit;
value:规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
从父元素继承 opacity 属性的值。
DISPLAY:NONE
2.3 display
属性规定元素应该生成的框的类型。值为none，表示元素不会被显示。位置也不再被占据。
2.4 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单独设置一个值，可否挣脱父级的束缚？
答案是否定的。
7.参考文献
参考1：W3school
8. 更多讨论
问：为何父级设置opacity后，子级无论如何设置opacity值都会透明
答：父级元素设置opacity后，就像一个透明膜覆盖在正个元素上面，子级元素设置任何opacity值，但是只要他在盒子内部，就会被透明盒盖盖住。
问：如果给元素同时设置opacity和rgba会如何
答：他们俩的透明效果会叠加在一起。
背景设置rgba（92,203,218,0.5）
背景设置opacity0.5
两个样式叠加后的效果
问：如果子级元素设置visibility：visible而父级设置hidden会如何
答：除设置visble的正常显示，其余都隐藏。
鸣谢
感谢大家观看
BY : 郭婷婷
PPT链接：https://ptteng.github.io/PPT/PPT/css-07-rgba.html#/
rgba和opacity，display和visiblity_腾讯视频
--------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
网友评论