更改页面上另一个元素的混合混合模式时，背景过滤器不起作用答案

【问题标题】：Backdrop filter not working when mix blend mode of another element on the page is changed更改页面上另一个元素的混合混合模式时，背景过滤器不起作用
【发布时间】：2021-05-18 03:14:39
【问题描述】：

浏览器版本为 Chrome 87.0.4280.88

这是我偶然发现这个错误的方法：

页面上有两个独立的div，都是position: fixed;

其中一个具有悬停效果，可以更改其mix-blend-mode。

另一个有玻璃形态风格，带有backdrop-filter: blur(...px);

过滤器仅在页面上的其他元素设置为mix-blend-mode: normal; 时才起作用，否则看起来好像不受支持。

无论如何，我现在将停止使用悬停效果，但如果有什么技巧，那么让全世界都知道它会很好。

【问题讨论】：

标签： css-filters mix-blend-mode

【解决方案1】：

也遇到过这个错误（Chrome 90）。

快速修复：

将任何backdrop-filter 规则添加到应用了mix-blend-mode 规则的同一元素。

示例：

.blend {
  mix-blend-mode: difference;
  backdrop-filter: opacity(1); /* fixes the chrome-bug */
}

【讨论】：

当我将它添加到 mix-blend-mode 元素的父级时为我工作（Chrome 91）。感谢您的提示！

【解决方案2】：

之前的解决方案也适用于我（Chrome 93）。虽然我不得不将我的元素包装在另一个元素中并将mix-blend-mode 应用于它以使其像这样工作：

.wrapper {
  mix-blend-mode: multiply;
}
    
.blend { 
  backdrop-filter: opacity(1);
}

为我节省了很多时间。非常感谢！

【讨论】：