在 Bootstrap 5 的 div 中显示轮播作为背景

Question

我试图在一些文本后面显示一个轮播组件，以便在顶部有一个大标题的滚动/淡入淡出的图像。 我正在尝试将所有这些包装在一个 div 中，以便轮播图像不是整个页面的背景，只有这个标题部分。

我找到了this post from 2013，但情况发生了很大变化。我尝试过调整它，但它根本不显示，即使在 Firefox 调试器中摆弄overflow: hidden 的东西之后。

在 Bootstrap 5 中，我将如何在 div 中的文本后面显示一系列图像（轮播）？

编辑：这是我从链接的 SO 帖子中改编的代码。

<div class="col-xl-10 offset-xl-1 rounded">
    <div id="titleCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active" id="c-one"></div>
            <div class="carousel-item" id="c-two"></div>
            <div class="carousel-item" id="c-three"></div>
        </div>
    </div>
    <div class="row">
        <h1 class="text-center">Title Text</h1>
    </div>
</div>

.carousel {
    z-index: -99;
} /* keeps this behind all content */
.carousel-item {
    position: fixed;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
#c-one {
    background: url(../images/front_2.jpg);
    background-size: cover;
    -moz-background-size: cover;
}
#c-two {
    background: url(../images/front_3.jpg);
    background-size: cover;
    -moz-background-size: cover;
}
#c-three {
    background: url(../images/front_4.jpg);
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .active .left {
    left: 0;
    opacity: 0;
    z-index: 2;
}

Answer 1

首先，.carousel-items 中的固定位置为我打破了轮播，因为它们的高度为 0，所以我对此发表了评论。

答案就像这里的答案How do I position one image on top of another in HTML?

基本上，您的父容器 div <div class="col-xl-10 offset-xl-1 rounded"> 应设置为 position: relative;，以及 .carousel，顶部和左侧均设置为 0。

然后您将标题行设为position: absolute;，顶部和左侧也为 0。 仅此一项就可以满足您的需求，但会破坏标题行内的引导布局。

要修复它，还要将其设置为 right: 0（在此处找到答案 Bootstrap container with position:absolute loses layout inside）

另外，我测试了一个链接来代替标题中的 h1，看看它是否可以点击，所以 z-index 显然可以正常工作，您可以毫无问题地将内容放入标题行.