【CSS-7】

rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？

分享人：王熠(yì)华

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

在CSS7的任务中，我们会遇到需要透明度的边框，但用opacity好还是rgba好呢？
另外在面试中面试官问你display:none和visibility:hidden有什么区别?
我们回答display:none不占用原来的位置，而visibility:hidden保留原来的位置，会不会显得太年轻了。

2.知识剖析

1.rgba是什么：
RGB（Red（红色） Green（绿色） Blue（蓝色））的基础上增加了一个通道Alpha。
Alpha参数为透明值，在0~1之间。RGBa 扩展了 RGB的颜色
rgba（）是css中设置背景颜色中的一个属性。

2.rgba语法：
div { background-color: rgba(255,0,0,1); }
a 表示透明度：0=透明；1=不透明；

1.opacity是什么：
Opacity属性设置一个元素的透明度级别。
opacity是css的一个属性

2.opacity属性有哪些：
语法： div { background-color: rgb(255,0,0); opacity: 1; }
value指不透明度。从0.0（完全透明）到1.0（完全不透明）；
value 取值0~1，0为完全透明，1为完全不透明。默认是继承父元素opacity属性，所以子元素会继承父元素的opacity属性值，从而产生相同的效果。

3.他们俩的区别是什么：
rgba（）的作用对象是元素的背景颜色或元素的颜色，其对象的子元素不能够继承它的透明度；
opacity的作用对象是元素，以及元素的所有内容，并且其子元素能够继承它的透明度。

4.display的常用属性有哪些？

当元素设置display:none后，界面上将不会显示该元素，并且该元素不占布局空间（影响布局），但我们仍然可以通过JavaScript操作该元素。

5.visibility的常用属性有哪些？ visibility有两个不同的作用
1.用于隐藏表格的行和列
2.在不触发布局(即还占空间不影响布局)的情况下隐藏元素

visibility：hidden和display:none还有哪些不同区别？

（抓稳了，前方可能翻车）

俩者的特点：

俩者的特点：

俩者的特点对比：

3.常见问题

3.1 :  单独给子元素设置opacity的值会单独产生效果吗，还是说怎么修改都没办法，一定会继承父级的元素属性值？

4.解决方案

4.1:  代码实际演示看看

3.常见问题

3.2 :  如果是通过样式文件或方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，

4.解决方案

4.2:可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题

4.解决方案

代码实际演示看看

5.代码实战

6.拓展思考

除了display：none和visibility:hidden还有什么办法隐藏元素

7.参考文献

参考一：CSS魔法堂：display:none与visibility:hidden的恩怨情仇

参考二： css元素隐藏原理及display:none和visibility:hidden

8.更多讨论

鸣谢

感谢大家观看

BY : 王熠华