2

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

它在 Firefox 中运行良好。查看此小提琴以供参考：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>
4

1 回答 1

2

您面临与背景传播相关的问题，因为背景应用于body具有特殊行为

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

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'>

于 2020-02-22T11:47:14.527 回答