带文本叠加的图片
显示带有文本叠加的图片。
- 使用
<figure>
和<figcaption>
元素分别显示图片和文本叠加效果。 - 使用
linear-gradient
创建图片上的叠加效果。
<figure class="text-overlay-image">
<img src="https://picsum.photos/id/971/400/400.jpg" />
<figcaption>
<h3>商业定价</h3>
</figcaption>
</figure>
.text-overlay-image {
box-sizing: border-box;
position: relative;
margin: 8px;
max-width: 400px;
max-height: 400px;
width: 100%;
}
.text-overlay-image figcaption {
box-sizing: border-box;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%);
color: #fff;
padding: 16px;
font-family: sans-serif;
font-weight: 700;
line-height: 1.2;
font-size: 28px;
}
.text-overlay-image figcaption h3 {
margin: 0;
}