Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

html - 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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...