opacity 为什么会影响层级 ？

头像
你好啊你好
    41911554
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>opacity 影响 z-index</title>
  <style>
    #app1 div {
      width: 100vw;
      height: 50vh;
      position: fixed;
      top: 0;
      left: 0;
      background-color: red;
      z-index: 1;
    }

    #app2 {
      position: relative;
      width: 50vw;
      height: 100vh;
      background-color: rgb(0, 8, 255);
    }
  </style>
</head>

<body>
  <div id="app1">
    <div></div>
  </div>
  <div id="app2"></div>
</body>

</html>

    50% 透明度：
    image.png
    image.png

    不设置透明度：
    image.png
    image.png

    这是为什么？

    css前端
    阅读 186
    avatarAI BotBETA

    在CSS中，opacity 属性不仅影响元素的透明度，还影响该元素及其所有子元素的渲染层级。当您设置一个元素的 opacity 属性时，该元素及其所有子元素在视觉上的堆叠顺序（即 z-index）都会受到影响。

    opacity 为 1 时，元素完全不透明，而 opacity 为 0 时，元素完全透明。在 0 到 1 之间的任何值都会使元素部分透明。

    当您设置元素的 opacity 时，它实际上是在渲染过程中创建了一个“合成层”，这意味着该元素及其所有子元素都会被渲染到这个单独的层上。这个合成层在 z-index 堆叠顺序中的位置是基于该元素的 opacity 值来确定的。

    在您的示例中，#app1 div 的 opacity 被设置为 0.5（即 50% 透明度），这导致该元素及其子元素被渲染到一个合成层上。由于这个合成层是部分透明的，您可以看到它下面的 #app2 元素。

    当您不设置 opacity 时，#app1 div 和 #app2 都按照正常的 z-index 堆叠顺序渲染，#app1 div 的 z-index 值高于 #app2，因此它会覆盖在 #app2 之上。

    简而言之，opacity 属性的行为类似于在 z-index 堆叠顺序中创建了一个额外的合成层，该层的位置基于元素的 opacity 值来确定。这解释了为什么设置 opacity 会影响元素的视觉层级。

    1 个回答
    得票最新
    头像
    不死小强
      2.2k72943
      ✓ 已被采纳
      查看全部 1 个回答
      推荐问题
      宣传栏