html - 如何在插入英雄图像顶部的图像下插入标题

我在英雄图片上方插入了一些图片，我想添加标题



但是我应用的代码并不符合我的想法。我要应用的文本显示在英雄图像下，而不是缩略图图像下。



我什至尝试图和无题。没事。这是我的代码。

    img{
        height: 50%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      opacity: 25;
    }

    .carousel-caption {
        text-align: left;
      position: absolute;
      top: 50%;
      left: 30%;
      transform: translate(-50%, -50%);
      color: white;
    }

    .over-img{
      position: absolute;
      top: 65%;
      left: 6.5%;
      width : 85px;
      height: 85px;
    }

    div.caption {
      float: left;
      clear: both;
    } 

    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                  <div class="carousel-item active">
                      <img src="assets/img/Home-hero.jpg" class="d-block w-100" alt="...">
                      <div class="carousel-caption d-none d-md-block" style="padding-left:50px;">
                            <h1 style="font-size: 75px; font-weight: 700;">We Fix<br> What Matters</h1><br>
                            <p>We use edge technology to deliver high quality and<br> proffessional restoration services</p>
                          </div>

                          <div class="pic">
                          <img src="assets/img/home/Water.png" class="over-img">
                          <div class="caption">Water</div>
                         </div>


    </div>
                </div>
              </div>

最佳答案

尝试此实时Jsfiddle。这为您工作。

在这里，您的布局结构和元素定位错误。

img{
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  opacity: 25;
}

.carousel-item {
  position: relative;
}

.carousel-caption {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  color: white;
}

.over-img{
  /* position: absolute;
  top: 65%;
  left: 6.5%; */
  width : 85px;
  height: 85px;
}

.pic-sec {
  display: flex;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pic {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}

.caption {
  float: left;
  clear: both;
  color: white;
} 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                  <img src="https://i.ytimg.com/vi/YGE5euSZnbI/maxresdefault.jpg" class="d-block w-100" alt="...">
                  <div class="carousel-caption d-none d-md-block" style="padding-left:50px;">
                        <h1 style="font-size: 75px; font-weight: 700;">We Fix<br> What Matters</h1><br>
                        <p>We use edge technology to deliver high quality and<br> proffessional restoration services</p>
                      </div>

                      <div class="pic-sec">
                        <div class="pic">
                        <img src="https://via.placeholder.com/150" class="over-img">
                        <div class="caption">Water</div>
                       </div>

                       <div class="pic">
                        <img src="https://via.placeholder.com/150" class="over-img">
                        <div class="caption">Water</div>
                       </div>

                       <div class="pic">
                        <img src="https://via.placeholder.com/150" class="over-img">
                        <div class="caption">Water</div>
                       </div>

                       <div class="pic">
                        <img src="https://via.placeholder.com/150" class="over-img">
                        <div class="caption">Water</div>
                       </div>

                      </div>

               </div>

            </div>

          </div>

关于html - 如何在插入英雄图像顶部的图像下插入标题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59043504/