CSS隐藏元素的几种方法，以及他们之间的区别，opacity/visibility/display/rgba函数对比

概要

在网页设计中，我们经常需要将一个元素隐藏或者显示，而需求不同时，不同的隐藏方式也会带来不同的隐藏效果，我们来看看集中隐藏方式的不同。

display

• 浏览器不会生成属性为display: none;的元素。
• display:none;不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样。
• display: none;不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。
• transition无效

display:node;//隐藏
display:block;//显示

visibility

• 元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变html原有样式。
• visibility: hidden会被子孙继承，子孙也可以通过显示的设置visibility: visible;来反隐藏。
• visibility: hidden;不会触发该元素已经绑定的事件。
• visibility: hidden;动态修改此属性会引起重绘。
• transition无效。

visibility: hidden;//隐藏
visibility: visible;//显示

opacity

• opacity:0;filter：alpha(opacity=0-100;只是透明度为100%,元素隐藏，依然占据空间,隐藏后不会改变html原有样式。
• opacity:0;filter：alpha(opacity=0-100;会被子元素继承,且子元素并不能通过opacity=1，进行反隐藏。
• opacity:0;filter：alpha(opacity=0-100;的元素依然能触发已经绑定的事件。
• transition有效。

opacity:0;//隐藏
opacity:1;//显示

background

• rgba函数可以实现背景为半透明，元素的字完全不透明的效果

background:rgba(0,0,0,0.5)//半透明

比对

我们可以通过这个图，去了解几种方式更多的不同