当元素是正文的直接子元素时，mix-blend-mode在webkit-browsers中不起作用 [英] mix-blend-mode not working in webkit-browsers when element is direct child of body
问题描述
在chrome或edge之类的webkit浏览器中，我无法使用mix-blend-mode: difference在白色背景上显示带有fill="#fff"的svg图像.
I can't get an svg image with fill="#fff" to show on a white background using mix-blend-mode: difference in webkit browsers like chrome or edge.
在Firefox中工作正常.请查看此提琴供参考: JSFiddle
It is working fine in firefox. Check out this Fiddle for reference: 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>
推荐答案
You are facing an issue related to background propogation since background applied to body has a special behavior
如果您考虑使用另一个容器，它将可以正常工作:
If you consider another container it will work fine:
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提供与透明不同的背景，并且可以使用:
With the body element you need to provide a background to html different from transparent and it will work:
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'>
这篇关于当元素是正文的直接子元素时，mix-blend-mode在webkit-browsers中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
