<div class="blend1"><img src="https://source.unsplash.com/800x800/?sweet,pink" alt="">
  <p>normal<span>通常</span></p>
</div>

<div class="blend2"><img src="https://source.unsplash.com/800x800/?sweet,yellow" alt="">
  <p>multiply<span>乗算</span></p>
</div>

<div class="blend3"><img src="https://source.unsplash.com/800x800/?sweet,pink" alt="">
  <p>overlay<span>オーバーレイ</span></p>
</div>

/* base */
body,div{
  margin:20px;
}
p{
  font-size:50px;
  font-weight:bold;
  padding:20px;
}
p span{
  font-size:20px;
}
div{
  width:400px;
  position:relative;
}
div img{
  width:100%;
}
div p{
  position:absolute;
  left:0;
  bottom:0;
}

/* mix-blend-mode */
.blend1 p{
  mix-blend-mode:normal;
  background:purple;
  color:white;
}
.blend2 p{
  mix-blend-mode:multiply;
  background:purple;
  color:white;
}
.blend3 p{
  mix-blend-mode:overlay;
  background:purple;
  color:white;
}