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

Question

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T21:43:01+0000

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>