如何添加位于我的 bootstrap 旋转木马顶部的封面图片？

Question

我有三张图片在整页轮播中旋转。我正在尝试添加一个 "cover" 图像，可以说，它位于三个旋转图像之上。此图像将有一个切口，让您可以看到在它后面旋转的三个。我只是不确定将这张图片放在 HTML 中的什么位置或者 css 会是什么样子。

<header id="myCarousel" class="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
            <div class="carousel-caption">
                <h2>Caption 1</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
            <div class="carousel-caption">
                <h2>Caption 2</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
            <div class="carousel-caption">
                <h2>Caption 3</h2>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>

</header>

<script>
$('.carousel').carousel({
    interval: 500, //changes the speed
    pause: false
})
</script>

html,
body {
    height: 100%;
}

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

Answer 1

不能 100% 确定我是否理解您的问题。您可以在 header 标签内添加一个 div，在顶部并使其绝对定位在顶部。如果需要调整 z-index，不要忘记将 header 作为位置：相对。

如何添加位于我的 bootstrap 旋转木马顶部的封面图片？

How can I add a cover image that sits on top of my bootstrap carousel?

html

css

carousel

twitter-bootstrap