主页 / coding / 问题 / 78358624
Accepted
KingKongFrog
Asked: 2024-04-20 22:44:04 +0800 CST

使用不透明度时使重叠的 div 考虑 z-index

  • 772

我一生都无法弄清楚为什么较高的 z-index 元素在重叠的地方是透明的。有什么想法我在这里做错了吗？

.container {
  position: relative;
  width: 700px;
  height: 500px;
  border: 1px solid #ccc;
  overflow: hidden;
  position: relative;
}

.img1 {
  background: url('https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg');
  background-size: cover;
  width: 300px;
  height: 200px;
  top: 50px;
  position: absolute;
  z-index: 3;
  opacity: 0.3;
}

.img2 {
  background: url('https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg');
  background-size: cover;
  width: 300px;
  height: 200px;
  top: 150px: left: 200px;
  position: absolute;
  z-index: 1;
  opacity: 0.3;
}
<div class="container">
  <div class="img1">
  </div>
  <div class="img2">

  </div>
</div>

html

1 个回答

  1. Best Answer

    使用不透明度时，即使堆叠元素，透明度仍然保留 - 这就是透明度本身的定义。

    如果您想要做的是不让底部图像的左上角出现在顶部图像后面，我们可以使用过滤器代替不透明度（道具如何模拟元素上的不透明度效果而不使用不透明度）使其透明？）：

    .img1 {
  background: url('https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg');
  background-size: cover;
  width: 300px;
  height: 200px;
  top: 50px;
  position: absolute;
  z-index: 3;
  /*Remove opacity*/
  /*opacity: 0.3;*/
  --desired-opacity: 0.3
  --brightness: calc(2 - var(--desired-opacity));
  --contrast: calc(var(--desired-opacity) / (2 - var(--desired-opacity)));
  filter: contrast(var(--contrast)) brightness(var(--brightness));
}

    这模拟了不透明度属性，基于我指出的问题中可以找到的公式。

    https://jsfiddle.net/4ftbukr8/5/

    • 1

相关问题