Question

我的感觉是滚动背景图像并不是很愉快所以我试图获得固定的背景横幅和透明的前景循环图像。我尝试了以下解决方案，但在这种情况下，前景图像在循环动画后立即隐藏：有什么想让它运转起来吗？

<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="fill" style="background-image:url('banniere2000x400.jpg');"></div>
      <div class="item active">
            <div class="carousel-caption">
                <img id="menuscreen" src="carouselforeground1.png" alt="Logo"/>
                <p>first image</p>
            </div>
        </div>
        <div class="item">
            <div class="carousel-caption">
                <img src="carouselforeground2.png" alt="Logo"/>
                <p>second image</p>
            </div>
        </div>
        <div class="item">
           <div class="carousel-caption">
                <img src="carouselforeground2.png" alt="Logo"/>
                    <p>third image</p>
           </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>
<body>
</body>
</html>

编辑了一个工作示例：除了我让你选择自己的图像并且需要安装botstrap3之外，我认为应该可行。

Answer 1

我得到了它的工作，但不幸的是，我不记得如何。所以，正如有人想知道该怎么做，我在这里给出了我的CSS规则，我希望它能帮到他们。

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

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

#hoverme .fill{
    position: absolute;
}

.carousel-caption{
    font-size: 4em;
    position: absolute;
    top: -11vh;
    left: -10vw;
}

.carousel-caption p{
    position: relative;
    top: -45vh;
    right: -25vw;
}

.carousel-control {
    position: absolute;
    z-index: 10;
}

Twitter bootstrap 3旋转木马与固定的背景图像

1 个答案: