CSS属性之opacity

写这篇文章的原因是我在字节面试的时候，被问了一个问题如何隐藏父元素，并把子元素显示，面试的时候我回答了opacity。面试官小姐姐细心的给我解释了opacity是不可以的，为了以后不再犯相同错误，所以打算来学习学习这个属性。 完整面试内容点击这儿 本文将主要讲解父opacity对子元素的影响。

概述

opacity属性指定一个元素的不透明度。换个角度，opacity属性指定了当前元素对后面背景的不透明程度。默认值是1，表示当前元素完全不透明，完全会遮挡住后面的背景。 示例：

子元素的不透明度与父不透明度的影响

• 实际展现效果的opacity = 父元素的opacity * 自身的opacity。
• 如果存在多重祖先节点，那就累乘。实际展现的效果opcity = 祖先opacity * 父元素的opacity * 自身的opacity。

1. 父元素opacity:1, 子元素变化

2. 父元素的opacity: 0.8, 子元素变化 通过这个示例可知，一个元素其自身的opacity最后展现的效果，应该是是其 父元素的opacity * 其自身的opacity