Question

我试图在Bootsrap的帮助下创建一个响应式网站，但遇到了一些问题（由于缺乏经验）。

主要的想法是创建一个简单的Bootstrap corousel，它应该是一个固定的或稍微移动的背景（例如 - https://modernthemes.net/demo/?theme=proper），这样在滚动页面后，剩下的内容将溢出这个背景。 / p>

我现在拥有的是 - HTML：

<header id="myCarousel" class="carousel slide">

    <!-- 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(static/header/1st.jpg);"></div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url(static/header/2nd.jpg);"></div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url(static/header/3rd.jpg);"></div>
        </div>
    </div>
</header>

CSS：

.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;
}

但我不知道我应该在哪里使用

no-repeat center center fixed;

或其他类似内容（如https://modernthemes.net/demo/?theme=proper）结果。

我已经找到了一些类似的主题，但在我的案例中没有一个正常工作。这就是为什么我非常感谢你的帮助。

Answer 1

正如您在示例中看到的那样（https://modernthemes.net/demo/?theme=prope），背景的位置是固定的，滚动时图像像幻灯片的其余部分一样向上但图像的背景位置发生变化看起来已经修好了。

Bootstrap - 使用旋转木马作为固定背景

1 个答案: