当元素是 body 的直接子元素时，mix-blend-mode 在 webkit-browsers 中不起作用

Question

我无法在 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>

Answer 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 */
}

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

当元素是 body 的直接子元素时，mix-blend-mode 在 webkit-browsers 中不起作用

mix-blend-mode not working in webkit-browsers when element is direct child of body

html

css

webkit

mix-blend-mode