<p>▼ blend-mode</p>
<div class="image monochrome">赤い文字を設定しています</div>
<p>▼ オリジナル</p>
<img src="https://gahag.net/img/201509/08s/gahag-0002507193-1.jpg" alt="" class="image original">
.image {
  color: red;
  font-size: 30px;
  width: 500px;
}

.monochrome {
  height: 333px;
  background-image:
    linear-gradient(black, black),
    url(https://gahag.net/img/201509/08s/gahag-0002507193-1.jpg);
  background-size: cover;
  background-blend-mode: saturation;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.