JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Mischen oder nicht mischen</h1>
<p>Erstes Beispiel: Das Bild vermischt sich sowohl mit dem roten div-Element, in dem es sich befindet, als auch mit dem blauen Hintergrund, der bei body definiert ist.</p>
<p>Weitere Beispiele: Das Vermischen des Bildes mit body wird auf verschiedene Arten verhindert</p>
<ul>
  <li>durch Opacity</li>
  <li>mit position in Kombination mit z-index</li>
  <li>durch die neue Eigenschaft isolation: isolate (funktioniert im Firefox ab Version 36)</li>

</ul>
<h3>Funktioniert in Firefox 36, Safari ab 7.1 und im aktuellem Chrome, sofern das entsprechende Flag gesetzt ist<br>
<a href="http://www.maurice-web.de/isolation-isolate-das-vermischen-bei-den-blendmodi-genau-steuern-css3">zurück zum Artikel "isolation: isolate: Das Vermischen bei den Blendmodi genau steuern (CSS3)"</a></h3> 


<body>
  <div>
      <img src="http://www.maurice-web.de/blogbeispiele/wald.jpg"/>
  </div>
  
  <div class="opacity">
      <img src="http://www.maurice-web.de/blogbeispiele/wald.jpg"/>
  </div>
  <div class="position">
      <img src="http://www.maurice-web.de/blogbeispiele/wald.jpg"/>
  </div>
  <div class="isolation">
      <img src="http://www.maurice-web.de/blogbeispiele/wald.jpg"/>
  </div>

CSS

body, a { 
  background-color: blue; 
  color: white;
  font-family: sans-serif;
}
div { 
  background-color: red; 
  width: 210px; 
  padding: 20px;
  margin: 10px;
}
.opacity {
}
.position {

}
.isolation {
}
img { 
  mix-blend-mode: difference; 
}