MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Make Text color inverting the background image

    Scheduled Pinned Locked Moved Custom CSS
    5 Posts 2 Posters 3.5k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R Offline
      rak
      last edited by 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.

      0_1529832059599_Bildschirmfoto 2018-06-24 um 11.20.26 AM.png

      Someone a clue?

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

      Regards
      Ralf

      1 Reply Last reply Reply Quote 0
      • R Offline
        rak
        last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • R Offline
          rak
          last edited by

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

          N 1 Reply Last reply Reply Quote 0
          • N Offline
            ninjabreadman @rak
            last edited by

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

            Problem with config or JavaScript? Copy/paste it into JSHint.
            Check out the detailed walkthroughs on install, config, modules, etc.

            1 Reply Last reply Reply Quote 0
            • R Offline
              rak
              last edited by

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

              1 Reply Last reply Reply Quote 0
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Sam, technical setup by Karsten.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy