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

<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的“顶部”并添加了一个“底部”，但是由于文本不是在图像之上而是在整个卡片之上，所以它不起作用。

包含卡片标题的红色框应该始终停留在图像的底部，无论屏幕大小。