【修真院Web小课堂】

rgba和opacity的透明效果有什么不同？

display和visiblity有什么区别？

开场语：

大家好，我是IT修真院广州分院第1期的学员王熠华，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网web任务五中深度思考中的知识点——rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？

（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.Opasity是什么：

Opasity属性设置一个元素的透明度级别。

Opasity是css的一个属性

2.opacity属性有哪些：

语法： div { 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.在不触发布局(即还占空间不影响布局)的情况下隐藏元素

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

俩者的特点：

display：none的特点

visibility：hidden特点

俩者的特点对比：

（3）常见问题：

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

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

（4）解决方案：

     4.1第一问:单独给子元素设置会产生相应的属性，不过还需要看父元素的设置。

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

（5）编码实战：

   详情编码实战见视频。

（6）拓展思考：

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

答：opacity:0，opacity属性我相信大家都知道表示元素的透明度，而将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。

设置height，width等盒模型属性为0，这是我总结的一种比较奇葩的技巧，简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，这算是一种奇技淫巧。

（7）参考文献：

 引用文献：

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

CSS“隐藏”元素的几种方法的对比

（8）更多讨论：

Q1：display和visiblity在应用中使用哪个好

A1：没有相对哪个好，看具体得使用环境和布局，例如在弹性盒子等分三列对齐的时候，我需要三个中的其中一个隐藏，但不要他们改变布局，那么则使用visitbility：hidden来让他隐藏并且让他保持原来的一亩三分地，布局不会变。

Q2：给子元素设置不同的opacity应该就可以避免继承问题了把

A2：当父元素的透明度为0，子元素的透明度为1，那么父子元素俩个都是为0的透明度；

当子元素的透明度小于父元素的透明度，那么子元素将继承它自己的透明度；

Q3：用display：none来隐藏属性，那我用opacity使他透明也可以吗？

A3：这也是一种方法，不过用的不多，而且这个opacity的话是不会消失一直占空间的。

（9）鸣谢：

感谢孟晨师兄，此教程是在他们之前技术分享的基础上完善而成。

（10）结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~