0

I'm trying to make the h1's font reacting so that it's font color is always the opposite of the background. I've checked everything and have no idea what's wrong. Any help? 

var oldName;
var open;

function changeImage(name) {
  var text = document.getElementById('demo');
  if (name == oldName && open) {
    text.innerHTML = "<img src=\"blank.jpg\"alt=\"blank\"height=\"256\">"
    open = false;
  } else {
    text.innerHTML = "<img height=\"256\" src=" + name + ">"
    open = true;
  }

  oldName = name;
}
.rev {
  mix-blend-mode: difference;
}

body {
  background-image: url("colorful.jpg");
}

span {
  font-size: 20px;
}

.inside {
  font-size: 30px;
}

button {
  margin: 0 auto;
  width: 400px;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
}

p {
  font-size: 20;
}

#linkki {
  width: 76px;
  font-size: 14px;
  background-color: white;
}
<center>
  <br />
  <div class="rev">
    <h1>Kysymys</h1>
    <div>
      <br><br>
      <div id="demo">
        <img src="blank.png">
      </div>
      <br><br><br>
      <button onclick="changeImage('wrong.png'); this.onclick=null;">
  A) Tuntitehtävät, joita hyädynnän omassa kyselyssä ja extratehtävät, jos ehdin.
  </button>
      <br />
      <br />
      <button onclick="changeImage('wrong2.png'); this.onclick=null;">
  B) Tuntitehtävät.
  </button>
      <br />
      <br />
      <button onclick="changeImage('correct.png'); this.onclick=null;">
  C) Tuntitehtävät ja oma kysely.
  </button>
      <br>
      <br>
      <br>
      <div id="myDIV">
        <button id="linkki"><a id="linkki" href="kys2.html">Seuraava</a></button>
      </div>
</center>

The h1 shows as black. I want it to be the OPPOSITE of the background.

Selsku
  • 1
  • 6
  • Which browser are you checking it on? Lately, Chrome is creating problems for me. It does not show changes until hours later. Firefox responds immediately on changes. I hope that is your problem. – Mugé May 06 '17 at 16:10
  • Not working still. Now the h1 is invisible/black – Selsku May 07 '17 at 06:58
  • Sorry, can't help you. I have not tried out the latest CSS tricks. Here is a link [link text] https://css-tricks.com/almanac/properties/m/mix-blend-mode/ if it helps. From what I see from your example, your header is black on white background, opposite of background. – Mugé May 08 '17 at 21:42
  • I think I know what's causing it. The background color is white but I set the background image also. Maybe it ignores the image? How can I avoid this? – Selsku May 09 '17 at 15:00
  • Try creating a separate div inside your container, maybe it will do some magic trick. Have you checked out the link above? – Mugé May 11 '17 at 16:42
  • I also see that you have 2 divs that are not closed up:
    and underneath a
    after h1 header.
     – Mugé May 11 '17 at 16:44

0 Answers0