Demo: CSS mix-blend-mode

<div class='container'>
  <div class='background'></div>
  <div class='blend'>Blend Mode Example</div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  background: #FFFFFF;
}

.background {
  background: url('https://via.placeholder.com/300x200/FF5733/FFFFFF?text=Background') no-repeat center;
  width: 100%;
  height: 100%;
}

.blend {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  mix-blend-mode: multiply;
}

// No JavaScript required for this demo