使用 Bootstrap 重叠图像和文本 HTML 的问题答案

【问题标题】：Problem with overlapping image and text HTML with Bootstrap使用 Bootstrap 重叠图像和文本 HTML 的问题
【发布时间】：2021-05-12 08:01:45
【问题描述】：

我遇到了 HTML 问题...我需要将两行文本与图像重叠。我正在使用 bootstrap4，并且正在使用模板，在这段代码中，模板运行良好：

<section class="position-relative dark-overlay py-3 py-lg-7 overflow-hidden" data-parallax="scroll" data-image-src="img/photo/erii-gutierrez-487083-unsplash.jpg" data-speed="0.3" data-position-x="right">
      <div class="container overlay-content hero hero-page">
        <ul class="breadcrumb justify-content-center no-border mb-0">
          <li class="breadcrumb-item"><a class="text-white" href="index.html">Home</a></li>
          <li class="breadcrumb-item text-white active">Ladies</li>
        </ul>
        <div class="hero-content pb-5 text-center text-white">
          <h1 class="hero-heading">Ladies</h1><p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
        </div>
      </div>
    </section>

这就是我正在尝试的，我不知道为什么它不起作用

<section class="dark-overlay overflow-hidden" data-parallax="scroll" style="width:100%">
   <div class="position-relative container overlay-content hero hero-page">
            <img src="img/fotos/cava720.gif" width="100%">

     <div class="hero-content text-center text-white">
       <h1 class="hero-heading">Title</h1><p class="lead">subtitle</p>
     </div>
   </div>
</section>

你知道发生了什么吗？

我只知道模板中有一些我不太了解的 JavaScript 代码...

谢谢！！！

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

有几种方法可以让文字覆盖图片，目前看起来你的英雄内容是在你的图片之后出现的。我通常通过将文本放在 div 中，然后将图像作为 div 的背景来解决这个问题。

这是 CSS 和 HTML：

.container{
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png");
}

<div class="container">
  <div class="hero-content text-center text-white">
    <h1 class="hero-heading">Title</h1>
    <p class="lead">subtitle</p>
  </div>
</div>

你可以在codepen here看到它

您可以阅读有关背景属性的自定义here

【讨论】：