<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.