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代码中的一个类，在CSS中，它被选为ID

因此，代码将是：

.logo {
    .....
}

代替

#logo {
    .....
}

Answer 2

没有适当地（相对）放置父元素。将代码包装在容器中，并相对放置容器，然后div（包装器的子代）及其内部的图像将相应地起作用。或者，将div插入页眉中，以便徽标div是页眉的子级。

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

2 个答案: