时间戳

首页 > 解决方案 > 带有容器文本和标题的背景图像

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

问题描述

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

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

标签： htmlcsscontainersbackground-imagebanner

解决方案

减小宽度.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>

推荐阅读