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

while

CSS代码主要内容

<强> CSS

<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>

Answer 2

您所要做的就是在轮播代码

之后添加此HTML

<div class="main-text">
    <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 class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">Login</a><a class="btn btn-clear btn-sm btn-min-block"
            href="http://www.jquery2dotnet.com/">Registration</a></div>
    </div>
</div>

添加此css

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

（Demo）

Answer 3

尽管如果我们想要固定文本并同时滚动文本，问题中的链接提供了一个很好的解决方案，但是在大多数情况下，我们只需要固定或滚动即可。在Bootstrap中固定文本就像将<div class="carousel-caption">放在<div class="item">外面并将其直接放在<div class="carousel-inner">下一样简单。无需任何其他CSS或HTML。示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/1200x500/3498db/2980b9" alt="First slide">
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
    </div>
    <div class="carousel-caption">
      <h3>Static Headline And Content</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

轮播被设计为将滚动内容放置在<div class="item">内，固定内容直接放置在<div class="carousel-inner">内。我们可以提供两者，但它们会彼此重叠，因此我们需要附加的CSS才能将它们分开。但是大多数情况下不需要同时使用两者。

保持一个bootstrap轮播作为静态背景与文本在上面

3 个答案: