Bootstrap 5 上面的图像和文字

Question

我有 Bootstrap 5 网站模板，我需要在中心图像上添加白色背景的文本。

这是我的代码

<div class="container-fluid overflow-hidden">
    <div class="row">
        <div class="col-12 col-md-6 p-0 position-relative">
            <div class="position-relative">
                <img class="img-fluid w-100 h-100 object-fit-cover" loading="lazy" src="images/contact-us-img.png" alt="">
                <div class="contact-image-box">
                    <h3 class="our-company-title">Title</h3>
                    <p class="our-company-text">Company text</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 align-self-md-center">
        content here
        </div>
    </div>
</div>

我尝试使用这个CSS

.our-company-title{
    line-height: 31px;
    letter-spacing: 0;
    color: #000;
    font-size: 25px;
}

.our-company-text{
    color: #787878;
    line-height: 150%;
    font-size: 18px;
    letter-spacing: 0;
}

.contact-image-box {
    position: absolute;
    background-color: #fff;
    text-align: center;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

在这种情况下，我看到白色而不是图像，但我想要白色矩形，并在图像中心放置标题和文本

我也尝试过

.contact-image-box {
    max-width: 400px;
}

但是在这种情况下标题和文本左对齐而不是居中

Answer 1

我的建议是在联系人图像框中使用内部 div。这个 div 应该包含文本和内容，另一方面，.contact-image-box div 应该是一个容器。将这些 Flexbox 属性赋予该容器 div，然后将该白色背景颜色添加到内部 div。

应该是这样的：

.contact-image-box { 
  inset: 0; // this is equivalent to the top, bottom, left and right set to 0
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
        
   & > div {
     background-color: white;
   }

}

Answer 2

您想将

background-color

添加到

h3

，如下所示：

.our-company-title{
  line-height: 31px;
  letter-spacing: 0;
  color: #000;
  font-size: 25px;
  background-color: #fff;
}

JSFiddle：https://jsfiddle.net/TRNCFRMCN/0sygdf3w/4/