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