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

问题

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.

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>

回答1:

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>

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

来源：https://stackoverflow.com/questions/60210336/mix-blend-mode-not-working-in-webkit-browsers-when-element-is-direct-child-of-bo

标签

html

css

webkit

mix-blend-mode

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!