javascript - 将 bootstrap carousel 保持为静态背景，顶部有文本

Question

所以我正在尝试实现这样的东西:

http://bootsnipp.com/snippets/featured/carousel-static-headline-caption

其中有以轮播为背景的文本。目前，当我滚动浏览轮播时，文本也会滚动。这是我正在使用的轮播代码。

HTML:

    <!-- 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('image');"></div>
            <div class="carousel-caption">
            <h1>Text that I would like to stay</h1>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('image');"></div>
            <div class="carousel-caption">
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('image');"></div>
            <div class="carousel-caption">
            </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>

CSS:

    html,
    body {
        height: 100%;

    }

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

    }

    .carousel-inner {
        height: 100%;
    }


    .carousel-caption {
        padding-bottom: 475px;

    }

    /* Background images are set within the HTML using inline CSS, not here */

    .fill {
        width: 100%;
        height: 100%;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        opacity: 0.9;
        top: 50px
    }

    footer {
        margin: 50px 0;
    }
body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}

@media(min-width:767px) {
    .navbar {
        opacity: 0.6;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }

}.intro-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

.about-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

.services-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

.contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

Answer 1

你的 HTML 应该是这样的

HTML

<div class="col-md-12">
    <div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
        <ol class="carousel-indicators">
            <li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
            <li data-slide-to="1" data-target="#carousel-example-generic" class="active"></li>
            <li data-slide-to="2" data-target="#carousel-example-generic" class=""></li>
        </ol>
        <div class="carousel-inner">
            <div class="item">
                <img alt="First slide" src="http://placehold.it/1200x500/3498db/2980b9">
                <div class="carousel-caption">
                    <h3>
                                First slide</h3>
                    <p>
                        Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
            <div class="item active">
                <img alt="Second slide" src="http://placehold.it/1200x500/9b59b6/8e44ad">
                <div class="carousel-caption">
                    <h3>
                                Second slide</h3>
                    <p>
                        Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
            <div class="item">
                <img alt="Third slide" src="http://placehold.it/1200x500/34495e/2c3e50">
                <div class="carousel-caption">
                    <h3>
                                Third slide</h3>
                    <p>
                        Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
        </div>
        <a data-slide="prev" href="#carousel-example-generic" class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span></a><a data-slide="next" href="#carousel-example-generic" class="right carousel-control"><span class="glyphicon glyphicon-chevron-right">
                        </span></a>
    </div>
    <div class="main-text hidden-xs">
        <div class="col-md-12 text-center">
            <h1>
                        Static Headline And Content</h1>
            <h3>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </h3>
            <div class="">
                <a href="http://www.jquery2dotnet.com/" class="btn btn-clear btn-sm btn-min-block">Login</a><a href="http://www.jquery2dotnet.com/" class="btn btn-clear btn-sm btn-min-block">Registration</a></div>
        </div>
    </div>
</div>

主要内容的CSS代码

CSS

.main-text {
    color: #fff;
    position: absolute;
    top: 50px;
    width: 96.6667%;
}