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

Question

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

Answer 1

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

MS Edge旧式浏览器不支持

mix-blend-mode。

这是它无法在MS Edge旧版浏览器中工作的原因。

我建议您尝试使用新的MS Edge Chromium浏览器进行测试。充分支持mix-blend-mode。

示例：

.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浏览器中的输出：