CSS属性之opacity

1,464 阅读1分钟

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

概述

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

image.png

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

  • 实际展现效果的opacity = 父元素的opacity * 自身的opacity。
  • 如果存在多重祖先节点,那就累乘。实际展现的效果opcity = 祖先opacity * 父元素的opacity * 自身的opacity。
  1. 父元素opacity:1, 子元素变化 image.png

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