<div class="parent">
<div class="label style">サンプルです</div>
<img src="https://source.unsplash.com/600x400/?nature,water">
</div>
</div>
body {
max-width: 600px;
margin: 1em auto;
display: flex;
flex-wrap: wrap;
}
.parent {
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.label {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 8px 25px;
border-radius: 35px;
font-size:2.5rem;
font-weight: bold;
}
.label.style {
background: #fff;
color: #000;
mix-blend-mode: screen;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.