主页 / 问题 / 1540636
Accepted
kocapb
Asked:2023-09-14 19:04:53 +0800 CST2023-09-14 19:04:53 +0800 CST

如何撤消两个半透明 div 相交处的颜色增益（更改）

  • 772

有一堆块，其顶部绘制有div半透明效果（background-color+opacity或backdrop-filter: brightness(0.2)或其他效果，其组合）。问题是，当它们div相互叠加时，它们的效果加倍；它们相交的地方是可见的。如何摆脱这种影响？

由于多种原因，我无法停止将它们放在一起。我想用 CSS 属性凑合一下。

在图片中我用箭头标记了不良效果。半透明的div垂直放置，它们的交叉点作为垂直线可见。

我尝试了不同的mix-blend-mode滤镜与不同的滤镜和半透明颜色的组合，并且在叠加块时总是能得到效果。

半透明块本身是在绝对位置绘制的，并不总是一个接一个地绘制，因此使用伪元素不适合块的精确定位。

不需要的叠加效果的示例

代码：

<div class="wall" style="left: 170px; width:85px;"></div>
<div class="wall" style="left: 254px; width:283px;"></div>
<div class="wall" style="left: 537px; width:8px;"></div>

.wall {
    height: 100vh;
    position: absolute;
    top: 0;
    z-index: 0;
    backdrop-filter: brightness(0.9);
    pointer-events: none;
}
html

1 个回答

  1. Best Answer

    如果您将所有块制作为不透明，但将它们放入容器中并使其变为半透明怎么办？

    • 0

相关问题