CSS: Float a div on another div, Ex: Text caption on picture

程序员秋旺技术 2022年11月8日

0 收藏 458 点赞 1,370 浏览 928 个字

<style type="text/css">
    .figure {
        width: 316px;
        height: 205px;
        display: block;
        border-color: azure;
        position: relative;
    }
    .figure img {
        z-index:;
    }
    .figure .caption {
        position: absolute;
        left:;
        right:;
        bottom:;
        height:;
        width:inherit;
        display:inline-block;
        color: #fff;
        background-color: rgba(0,0,0,.5);
        z-index:;
    }
</style>

<div class="figure">
    <img src="https://pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvaW1nLWF3cy5laG93Y2RuLmNvbS8zMjB4MjA4L2Vob3ctdGVjaC1ibG9nLXVzL2ZpbGVzLzIwMTQvMDcvZ29vZ2xlLW1hcHMtbWVhc3VyZS5naWY=.jpg" alt="[Article Image] - How to Supercharge Google Maps" title="How to Supercharge Google Maps" class="image">
    <div class="caption"> How to Supercharge Google Maps </div>
</div>

<!–
.figure {
width: 316px;
height: 205px;
display: block;
border-color: azure;
position: relative;
}
.figure img {
z-index: 0;
}
.figure .caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 22;
width:inherit;
display:inline-block;
color: #fff;
background-color: rgba(0,0,0,.5);
z-index: 100;
}
–>