最终效果

css中grid网格布局的经典应用——图文层叠_前端

原理

将图片和文字都定位在同一个网格中

代码

<figure>
    <img src="../images/nature-11.jpg">
    <figcaption>自然风景</figcaption>
</figure>
figure {
    display: inline-grid;
}
figure > img,
figure > figcaption {
    grid-area: 1 / 1 / 2 / 2;
}
figure > figcaption {
    align-self: end;
    text-align: center;
    background-color: #0009;
    color: #fff;
    line-height: 2;
}

完整范例和代码见 ​​https://demo.cssworld.cn/new/6/3-9.php​​