Make Text color inverting the background image

[rak]

Hello,

I have a picture frame (no mirror). Kind of a family board. With MMM-Wallpaper I have a bing picture of the day in the back. Looks awesome.

The digital clock sits on top of the picture. I would like the color of he clock be sensitive to the backgound image. Text should be inverted. I googled and found this.

I cant get it to work.

.clock div.time.bright.large.light {
  mix-blend-mode: difference;
}

For the blue background white works, but imagine a more lighter picture in the back. You get the idea.

Someone a clue?

BTW. What browser is used by the MM^2? I am using the mitako image.

Regards
Ralf

[rak]

I was able to get it working for the new “Title” Option of the MMM-Wallpaper module.

.MMM-Wallpaper .title {
  left: 60px;
  top: calc(100% - 80px);
  font-weight: 200;
  font-size: 14px;
  line-height: 25px;
  mix-blend-mode: difference;
  color: white;
}

The browser used supports it.

For me it seems that for the clock the browser does not “see” the picture underneath the clock text. Not sure if this helps anyone to help me point out the problem.

[rak]

Seems no one can help.

I was able to get it some kind of working following this article with adding

.clock div.time.bright.large.light /*span.bold*/ {
  margin-top: 20px;
  font-size: 65pt;
  color: white;   
  z-index: 1;
  mix-blend-mode: difference;
  position: absolute;
}

.MMM-Wallpaper .wallpaper {
  position: absolute;
  z-index: 1;
  mix-blend-mode: difference;
}

But doing so the background gets blended two consecutive pictures. This is because MMM-Wallpaper has two IMG elements. One for the old one and one for the new one.

Not there yet …

This is just to keep you posted in case you want to help ,-).

[ninjabreadman]

@rak I suggest you avoid using z-indexing, margins and absolutely positioning unless you added them (and understand their effects).

Here’s a site doing fundamentally what you want: https://css-tricks.com/methods-contrasting-text-backgrounds/

.clock div.time.bright.large.light {
  color: white;
  mix-blend-mode: difference;
}

I expect that it should work, but will depend on how the wallpaper is inserted into the DOM.

[rak]

@ninjabreadman, thanks a lot for trying to help. You are right in your assumption, that I dont fully understand CSS. I am learning as we speak.

The site you mentioned is the one I found as well and followed. Unsuccessful. It is working for the copyright text/title of the Wallpaper module. So I cant be to far off. But not for the clock.

From what I found out so far is that the problem is that the wallpaper and the clock are not in the same “stacking index” which I tried to solve following this article.