带有容器文本和标题的背景图像

Question

我有一个带有一些覆盖标题和段落的背景全宽图像，我试图在桌面和移动图像上修复容器大小的段落和标题，但这里的段落也带有宽度。我正在使用引导程序，我希望我的标题和段落位于容器下方，而不是全宽。提前致谢。

.ttd-backwater {    
  position: relative;
}
.ttd-backwater .title {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -0%);
    color: white;
    text-align: left;
    width: 100%;
}

.ttd-backwater .title h4 {
  margin: 0;
  font-size: 40px;
  white-space: nowrap;
  color:#ffffff;
  padding: 12px 45px;
}

.ttd-backwater .title p{
  margin: 0;
  font-size: 1.0em;
  color:#ffffff;
  padding: 12px 45px;
  background-color: rgb(0 0 0 / 40%);
}
.ttd-backwater img {
  width: 100%;
  height: auto;
}

<section>
        <div class="fluid-container">
               <div class="row">
                         <div class="ttd-backwater ">
                           <img src="images/backwater.jpg">        
                              <div class="title">           
                              <h4>Heading</h4>
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                             </div>
                             </div>
                         </div>
                         </div>
                     </section>

Answer 1

缩小.title 的宽度：

.ttd-backwater {    
  position: relative;
}
.ttd-backwater .title {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translate(-50%, -0%);
  color: white;
  text-align: left;
  width: 80%;
}
.ttd-backwater .title h4 {
  margin: 0;
  font-size: 40px;
  white-space: nowrap;
  color:#ffffff;
  padding: 12px 45px;
}
.ttd-backwater .title p{
  margin: 0;
  font-size: 1.0em;
  color:#ffffff;
  padding: 12px 45px;
  background-color: rgb(0 0 0 / 40%);
}
.ttd-backwater img {
  width: 100%;
  height: auto;
}

<section>
  <div class="fluid-container">
    <div class="row">
      <div class="ttd-backwater ">
        <img src="https://picsum.photos/500">        
        <div class="title">           
          <h4>Heading</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </div>
    </div>
  </div>
</section>