Bootstrap中图像和文本HTML重叠的问题

Question

我的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代码。。。

谢谢！！！

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

你可以在这里的代码笔中看到它

你可以在这里阅读关于背景属性的定制