Html 图像上方半透明框中带有标题的引导卡

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

<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>

.盒子{
位置：相对位置；
/*显示：内联块；/*使框的宽度与图像相同*/
}
.box.text{
位置：绝对位置；
z指数：999；
保证金：0自动；
左：0；
右：0；
文本对齐：居中；
对齐项目：居中；
证明内容：中心；
顶部：40%；/*调整此值以上下移动定位的div*/
背景：rgba（178,0,0,0.8）；
字体系列：Arial，无衬线；
颜色：#fff；
宽度：100%；/*设置定位div的宽度*/
身高：10%；
}
标题
一些示例文本一些示例文本。一些示例文本一些示例文本。一些示例文本一些示例文本。一些示例文本一些示例文本

下面是它的外观：

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

我希望结果如下所示：

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

更新

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

---

在图像和标题周围移动.card img覆盖元素，如下所示

<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>
       

---

我很确定这会得到想要的结果

嘿，非常感谢，红色的盒子现在反应灵敏，并坚持它的位置。我只剩下一个问题了，红色的盒子里满是卡片。我尝试了溢出：隐藏但这还不够。知道为什么会这样吗？我编辑了我的问题，把我的意思包括进去。编辑我找到了一个解决办法，我把位置改成了

position:relative

并将

bottom

属性更改为28px。这似乎解决了我的问题。我可能不是最好的解决方案，但它是有效的：DAh我知道我忘了左边的：0；我会保持它的绝对性，并给它留下：0；否则，它仍将使用标题下方的空间，您可能无法在标题下方定位元素。没问题！很高兴我能帮忙！你能接受我的回答吗？：）

.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%;
}