混合混合模式似乎无法在边缘工作答案

【问题标题】：mix-blend-mode appears to not be working in edge混合混合模式似乎无法在边缘工作
【发布时间】：2020-05-18 13:52:23
【问题描述】：

https://caniuse.com/#search=mix-blend-mode 说支持但是 https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode 当我在 edge 中打开链接时，这些示例都不适合我，而在 chrome 或 firefox 中打开时它们可以正常工作。是否有一种 css 样式与在 edge 中工作的 mix-blend-mode 做同样的事情？

【问题讨论】：

只是为了验证您的 Edge 是否是最新的？如果我没记错的话，看起来只有铬版本支持它，版本号的大幅跳跃反映了 Edge 的铬版本。
欢迎来到 Stack Overflow！请将您的代码或 moz 链接中的代码发布到问题本身。请阅读how to create a minimal reproducible example。

标签： css microsoft-edge

【解决方案1】：

您似乎正在使用 MS Edge 旧版浏览器进行此测试。

MS Edge 旧版浏览器不支持mix-blend-mode。

这就是它无法在 MS Edge 旧版浏览器中运行的原因。

我建议您尝试使用新的MS Edge Chromium 浏览器进行测试。它很好地支持混合混合模式。

例子：

.container {
  padding: 15px;
 background-color: skyblue;
}

.img1 {
  mix-blend-mode: normal;
}
.img2 {
  mix-blend-mode: multiply;
}
.img3 {
  mix-blend-mode: hard-light;
}
.img4 {
  mix-blend-mode: difference;
}

<div class="container">
  <img src="https://i.postimg.cc/N0jVsWnX/img1.png" class="img1" width="300" height="300">
  <img src="https://i.postimg.cc/N0jVsWnX/img1.png" class="img2" width="300" height="300">
  <img src="https://i.postimg.cc/N0jVsWnX/img1.png" class="img3" width="300" height="300">
  <img src="https://i.postimg.cc/N0jVsWnX/img1.png" class="img4" width="300" height="300">

</div>

MS Edge Chromium 浏览器中的输出：

【讨论】：