当元素是正文的直接子元素时，混合混合模式在 webkit 浏览器中不起作用

【问题标题】：mix-blend-mode not working in webkit-browsers when element is direct child of body当元素是正文的直接子元素时，混合混合模式在 webkit 浏览器中不起作用
【发布时间】：2020-04-01 23:27:51
【问题描述】：

我无法在 chrome 或 edge 等 webkit 浏览器中使用 mix-blend-mode: difference 在白色背景上显示带有 fill="#fff" 的 svg 图像。

它在 Firefox 中运行良好。查看此 Fiddle 以供参考：JSFiddle

CSS

body {
  background-color: #fff;
}

.volume-icon {
  mix-blend-mode: difference;
}

HTML

<body>
  <img class="volume-icon" src='https://svgshare.com/i/HxZ.svg'>
</body>

【问题讨论】：

mix-blend-mode 在 Edge 中不起作用：caniuse.com/#search=mix-blend-mode
但它不应该在 chrome 中工作吗？
是的，它应该，但你不会让它在 Edge 中工作，所以如果你希望它在所有浏览器中工作，另一种解决方案将是首选。

标签： html css webkit mix-blend-mode

【解决方案1】：

您面临与背景传播相关的问题，因为应用于body 的背景具有a special behavior

如果您考虑使用另一个容器，它会正常工作：

div {
  background-color: #fff;
}

.volume-icon {
  mix-blend-mode: difference;
}

<div>
  <img class="volume-icon" src='https://svgshare.com/i/HxZ.svg'>
</div>

使用body 元素，您需要为html 提供一个不同于透明的背景，它会起作用：

body {
  background-color: #fff;
}

.volume-icon {
  mix-blend-mode: difference;
}


html {
  background-color: #fff; /* even the same color will do the job */
}

&lt;img class="volume-icon" src='https://svgshare.com/i/HxZ.svg'&gt;

【讨论】：