Bootstrap 4 引导4图像和文本对齐

我花了整整一天的时间在这个问题上，提出了质疑，但没有找到确切的答案。我还不是Bootstrap4专家。我有我做的下一页

<div class="card">
    <img src="~/img-theme/about-us-banner.png" class="img-fluid" />
    <div class="text-block opacity-4">
    </div>
    <h2 class="ontop">About Us</h2>
</div>

<div class="col-md-12">
    <p>text block here</p>
</div>

如何在没有大的空白的情况下使文本显示在图像下方

---

试着使用你的底部：300px值，因为它会在div下产生大量空间

.text-block {
   bottom: 300px;
   }

试试这个代码

Html:

。文本块{
位置：绝对位置；
/*底部：300px*/
/*右：20px*/
背景色：黑色；
填充：12rem；
/*宽度：30%*/
保证金：自动；
文本对齐：居中；
自对准：居中；
顶部：200px
}
h2.ontop{
位置：相对位置；
/*顶部：-8em*/
字号：4rem；
颜色：白色；
文本对齐：居中；
}

关于我们
此处为文本块

上述答案有点奏效，但没有得到很好的回应。以下是我最后做的：

    <div class="card card-block border-white">
    <img src="~/img-theme/about-us-banner.png" class="img-fluid" />
    <div class="text-block card-img-overlay opacity-4 d-none d-md-block">
    </div>
    <h2 class="ontop text-responsive">About Us</h2>
    </div>

---

虽然这个代码片段可以解决这个问题，但它确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满你的代码，这会降低代码和解释的可读性！

<div class="card">
    <img src="~/img-theme/about-us-banner.png" class="img-fluid" />
    <div class="text-block opacity-4">
        <h2 class="ontop">About Us</h2>
    </div>
</div>

.text-block {
position: relative;
background-color: black;
padding: 4rem;
width: 20%;
margin: auto;
text-align:center;
}


h2.ontop {
position: relative;
color: red;
text-align:center;
}

    <div class="card card-block border-white">
    <img src="~/img-theme/about-us-banner.png" class="img-fluid" />
    <div class="text-block card-img-overlay opacity-4 d-none d-md-block">
    </div>
    <h2 class="ontop text-responsive">About Us</h2>
    </div>

    .text-block {
  background-color: black;
  bottom: 6rem;
  width: 40%;
  height: 80%;
  margin: auto;
  margin-bottom: -6rem;
  text-align:center;
}


h2.ontop {
  position: relative;
  font-size: 400%;
  color: #fff;
  text-align:center;
  bottom: 10rem;
}




@media (max-width: 1199px) {
h2.ontop {
  position: relative;
  font-size: 400%;
  color: #fff;
  text-align:center;
  bottom: 7.5rem;
}
}

@media (max-width: 991px) {
h2.ontop {
  position: relative;
  font-size: 300%;
  color: #fff;
  text-align:center;
  bottom: 6rem;
}
}

@media (max-width: 767px) {
h2.ontop {
  position: relative;
  font-size: 300%;
  color: #fff;
  text-align:center;
  bottom: 6rem;
}
}