Grid布局实现元素上下层叠效果实例页面
回到相关文章 »效果：
代码：
CSS代码：
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;
}
HTML代码：
<figure>
<img src="11.jpg" alt="上海钓鱼自然风景">
<figcaption>上海钓鱼自然风景 by zhangxinxu</figcaption>
</figure>