CSS mix-blend-mode not working? Set a background-color!
CSS mix-blend-mode not working? Set a background-color! 관련
💡
If you find your CSS mix-blend-mode not working as expected (on a white background), you need to explicitly set a background-color on the underlying element. The easiest way to do so is to apply background-color: white; on the html and body elements.
html, body {
background-color: #fff;
}
Demos + Explanation
Without a background-color set
You’ll notice here that for the “white” sections, the set mix-blend-mode: difference does not seem to work. The navigation will stay white and visually blend into the white background. Note that the navigation is not actually gone, as you can still see it shine through whenever a number of any of the sections crosses it.
The reason why it doesn’t work is that the white sections don’t really have a white background. They have no background-color set, so they fall back to the default value of transparent. Visually this is manifested as a white color, but to the compositor it will still be transparent. As the compositor can’t calculate the difference of the white text against the transparent background, the text will remain white.
~
With a background-color set
With background-color: #fff; set on the body/html the compositor does know how to calc the difference, and the demo will behave correctly.
Alternatively we could set this declaration on the sections themselves:
section {
background-color: #fff;
}