html - 带有标题的引导卡在图像上的半透明框中

Question

我想创建一个引导卡，其中标题位于图像上方的半透明框中，而卡片的其余部分看起来像普通的引导卡。到目前为止，这是我的代码：

<style>
.box{
    position: relative;
    /*display: inline-block; /* Make the width of box same as image */
}
.box .text{
    position: absolute;
    z-index: 999;
    margin: 0 auto;
    left: 0;
    right: 0;        
    text-align: center;
    align-items:center;
    justify-content:center;
    top: 40%; /* Adjust this value to move the positioned div up and down */
    background: rgba(178, 0, 0, 0.8);
    font-family: Arial,sans-serif;
    color: #fff;
    width: 100%; /* Set the width of the positioned div */
    height: 10%;
}
</style>
<div class="container">
        <div class="card img-fluid" style="width:500px">
            <img class="card-img-top" src="img/green.jpg" alt="Card image" style="width:100%">
            <div class="card-img-overlay box">
                <h4 class="card-title text">Title</h4>
            </div>
            <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
            <a href="#" class="btn btn-danger">Learn more</a>
        </div>
    </div>

这是它的外观：

我的代码问题是这个包含卡片标题的红色框没有响应。它不仅跨越图像，而且跨越整个卡片。如何更改它以使红色框位于图像底部？我已经尝试更改 css“顶部”并添加了一个“底部”，但由于文本不在图像上而是在整个卡片上，所以它不起作用。

我希望结果如下所示：

无论屏幕大小如何，包含卡片标题的红色框都应始终位于图像的底部。

更新

这是包含以下代码后的样子。

Answer 1

像这样在图像和标题周围移动 .card-img-overlay 元素

<div class="card-img-overlay box">
    <img class="card-img-top" src="img/green.jpg" alt="Card image" style="width:100%">
    <h4 class="card-title text">Title</h4>
</div>
       

然后给标题下面的css

.box {
    position: relative;
}
.box .text {
    position: absolute;
    z-index: 999;     
    text-align: center;
    bottom: 0;
    left: 0;
    background: rgba(178, 0, 0, 0.8);
    font-family: Arial,sans-serif;
    color: #fff;
    width: 100%; /* Set the width of the positioned div */
    height: 10%;
}

我很确定这会产生预期的结果