CODEWITHSUNDEEP
javascripthtmlcss
GhzNcl
GhzNcl

Reputation: 169

Change font color based on background image

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

Upvotes: 1

Views: 10866

Answers (2)

EssXTee
EssXTee

Reputation: 1798

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()">

Upvotes: 3

Mahdi Zarei
Mahdi Zarei

Reputation: 7396

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.

Update:

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 :)

Upvotes: 1

Related Questions