CSS container-type元素重叠实例页面
回到相关文章 »效果:

代码:
CSS代码:
figure { display: inline-flex; } figure img { display: block; width: 256px; height: 192px; } figure > span { container-type: inline-size; } figcaption { width: 256px; align-self: end; text-align: center; background-color: #0009; color: #fff; line-height: 2; z-index: 1; }
HTML代码:
<figure> <span><img src="11.jpg"></span> <figcaption>上海钓鱼自然风景 by zhangxinxu</figcaption> </figure>