如何在自定义轮播上叠加图像？

Question

我有一个来自 here 的自定义轮播。我想在旋转木马的左上角叠加一张图片。

我找遍了，但我的旋转木马没有任何效果，因为它总是变形。


    <!-- Carousel -->
    <header>
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel-inner" role="listbox">
                    <!-- Slide One - Set the background image for this slide in the line below -->
                    <div class="carousel-item active" style="background-image: url('images/c1.jpg')">
                      <div class="carousel-caption d-none d-md-block">
                        <h2 class="display-4">First Slide</h2>
                        <p class="lead">This is a description for the first slide.</p>
                      </div>
                    </div>
                    <!-- Slide Two - Set the background image for this slide in the line below -->
                    <div class="carousel-item" style="background-image: url('images/c2.jpg')">
                      <div class="carousel-caption d-none d-md-block">
                        <h2 class="display-4">Second Slide</h2>
                        <p class="lead">This is a description for the second slide.</p>
                      </div>
                    </div>
                    <!-- Slide Three - Set the background image for this slide in the line below -->
                    <div class="carousel-item" style="background-image: url('images/c3.jpg')">
                      <div class="carousel-caption d-none d-md-block">
                        <h2 class="display-4">Third Slide</h2>
                        <p class="lead">This is a description for the third slide.</p>
                      </div>
                    </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                </div>
              </header>

    <div class="logo">
                    <img src="images/logo.png">
                </div>


    /* css */
    .carousel-item {
        height: 100vh;
        min-height: 350px;
        background: no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }

    #logo{
        position: absolute;
        top: 0;
        left: 0;
    }

图片只是放在轮播下面，而不是覆盖它。

jfiddle

Answer 1

徽标在您的 HTML 代码中是 class，在 CSS 中它被选为 ID

因此，代码将是：

.logo {
    .....
}

而不是

#logo {
    .....
}

Answer 2

没有适当（相对）放置父元素。将代码包装在容器中并相对定位容器，然后带有图像的 div（包装器的子项）将相应地执行操作。或者，将 div 粘贴在页眉中，这样徽标 div 就是页眉的子项。

如何在自定义轮播上叠加图像？

How to overlay image on a custom carousel?

html

css

carousel

bootstrap-4