Make Text color inverting the background image

Reply to Make Text color inverting the background image on Tue, 26 Jun 2018 16:43:49 GMT

rak — Tue, 26 Jun 2018 16:43:49 GMT

@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.

Reply to Make Text color inverting the background image on Mon, 25 Jun 2018 22:57:26 GMT

ninjabreadman — Mon, 25 Jun 2018 22:57:26 GMT

@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.

Reply to Make Text color inverting the background image on Mon, 25 Jun 2018 21:08:13 GMT

rak — Mon, 25 Jun 2018 21:08:13 GMT

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 ,-).

Reply to Make Text color inverting the background image on Sun, 24 Jun 2018 10:04:55 GMT

rak — Sun, 24 Jun 2018 10:04:55 GMT

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.