<div class="image-box">
  <img src="https://www.pc-weblog.com/sample/img/images/pic-1280.jpg" alt="" width="300" height="200">
  <p class="blend-text">ブレンドテキスト</p>
</div>
.image-box {
  isolation: isolate;
  position: relative;
  z-index: 1;
}

.blend-text {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 15px;
  font-weight: bold;
  mix-blend-mode: overlay;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.