I have a website where there are images moving around in the background and I would like the nav font to change based on the image color..
To get what I mean, just look at the '+' in this website nav https://www.atomomanagement.com/
Based on the image it either is white or black. I would like to do the same but I had no luck. I tried using mix-blend-mode: difference but it does not work
Can anyone help?
Kind regards
I felt I should post an answer to explain what is going on with OPs example.
Simply settings a fill: white on an SVG does not fully reproduce the desired result. OP's example also requires a parent div with mix-blend-mode: difference set as well.
You can actually reproduce this without any SVGs at all. You simply need an element with a color/fill of white, and a parent element with mix-blend-mode: difference. This has to do with how the blending mode of difference works with the color white over a background.
function _Swap() {
document.querySelector(".backgroundDiv").style.background = (document.querySelector(".backgroundDiv").style.background == "rgb(0, 0, 0)") ? "rgb(255, 255, 255)" : "rgb(0, 0, 0)";
}.backgroundDiv {
background: #FFF;
padding: 4em;
}
.test {
mix-blend-mode: difference;
}
p {
color: #FFF;
}<div class="backgroundDiv">
<div class="test">
<p>This is a test</p>
</div>
</div>
<input type="button" value="Swap Background Color" onclick="_Swap()">It is not changing. the path element in svg has this css attribute:
fill: white;
It is causing what you see. you can open it in devTools and remove that attribute and you can see the change then. to achieve what you want make a svg and add fill: white; to the path element.
I just found out this css property which was given to nav tag:
mix-blend-mode: difference;
It will revert the entire color of the element in the tag based on the bg.
essxtee answer was before my update. So the credit is his :)