CSS container-type元素重叠实例页面

回到相关文章 »

效果：

上海钓鱼自然风景 — 上海钓鱼自然风景 by zhangxinxu

代码：

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>