引导轮播上的图像答案

【问题标题】：Img over Bootstrap Carousel引导轮播上的图像
【发布时间】：2019-10-17 18:14:40
【问题描述】：

我需要一个移动图像，里面有变化的图像（滑动）；所以我认为由另一个图像覆盖的 Bootstrap 轮播应该可以完成这项工作。

下面是我的代码，但是有两个问题（响应式调整大小），因为我使用的是绝对定位，所以当前部分会覆盖下一部分。

<section>
    <h2 style="text-align: center;">Online Dashboard</h2>
    <div class="row" style="margin: 50px 0;">
        <div class="col-6" align="center">
            <div class="carousel slide" data-ride="carousel" style="position: absolute; left: 0; height: 100px; width: 50px;">
                <div class="carousel-inner">
                    <div class="carousel-item active" data-interval="1000">
                    <img src="resources/assets/images/oneplus6_phone_blue_screen.png" style="height: 100px;">
                </div>
                <div class="carousel-item" data-interval="1000">
                    <img src="resources/assets/images/oneplus6_phone_red_screen.png" style="height: 100px;">
                </div>
            </div>
            <img src="resources/assets/images/oneplus6_phone.png" style="position: absolute; top: 0; left: 0; height: 100px;">  
        </div>
    </div>
</section>
<section>
    <div class="row align-items-center justify-content-center">
        <div class="col-lg-4">
            <h2>We love brainstorming ideas!</h2>
            <a href="mailto:info@example.com?Subject=Website-Contact%20Form" target="_top"><button type="button" class="btn btn-outline-danger heartbeat">Contact Us!</button></a>
        </div>
    </div>
</section>

【问题讨论】：

请发布完整代码
嗨发布完整代码片段 - @Luke Galea
大家好，我添加了代码的下一部分，这对我来说似乎是唯一相关的部分。即我认为其他部分，如页脚、正文等不应该影响这个 sn-p。

标签： html css image bootstrap-4

【解决方案1】：

您可以使用此代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <!--Carousel Wrapper-->
  <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
    <!--Indicators-->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-2" data-slide-to="1"></li>
      <li data-target="#carousel-example-2" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->
    <!--Slides-->
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <div class="view">
          <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
          <div class="mask rgba-black-light"></div>
        </div>
        <div class="carousel-caption">
          <h3 class="h3-responsive">Light mask</h3>
          <p>First text</p>
        </div>
      </div>
      <div class="carousel-item">
        <!--Mask color-->
        <div class="view">
          <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
          <div class="mask rgba-black-strong"></div>
        </div>
        <div class="carousel-caption">
          <h3 class="h3-responsive">Strong mask</h3>
          <p>Secondary text</p>
        </div>
      </div>
      <div class="carousel-item">
        <!--Mask color-->
        <div class="view">
          <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
          <div class="mask rgba-black-slight"></div>
        </div>
        <div class="carousel-caption">
          <h3 class="h3-responsive">Slight mask</h3>
          <p>Third text</p>
        </div>
      </div>
    </div>
    <!--/.Slides-->
    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->
  </div>
  <!--/.Carousel Wrapper-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

【讨论】：

【解决方案2】：

您可以尝试将滑块的 z-index 值设为 1（如果我理解得很好，则为背景），并将移动图像的 z-index 值设为 2 或更高。或者您可以反转 z-index 值以使滑块位于移动图像上方。

【讨论】：