为什么我的引导程序全屏背景旋转木马具有褪色效果

Question

我在此链接上建立了滑块-https：//codepen.io/crashy/pen/jokmgg/-复制完全一样，它对所有浏览器都可以很好地工作，但是旋转木盘是由于某种原因，我不在移动设备中显示出来，我无法弄清楚原因。任何帮助都会很棒。

bootstrap模板：新时代

CSS

html {
    position: relative;
    min-height: 100%;
}
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-control {
    z-index: 2;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.item:nth-child(1) {
    background: url(../img/img-slide-1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.item:nth-child(2) {
    background: url(../img/img-slide-2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.item:nth-child(3) {
    background: url(../img/img-slide-3.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.item:nth-child(4) {
    background: url(../img/img-slide-4.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.item:nth-child(5) {
    background: url(../img/img-slide-5.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.carousel {
    z-index: -99;
}
.carousel .item {
    position: fixed;
    width: 100%;
    height: 100%;
}
.title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  color: #FFF;
  position: absolute;
  top: 40%;
  width: 100%;
}

html

<header class="carousel slide carousel-fade" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <div class="title">
                    <h1>INNOVATIVE</h1>
                    <div class="intro-copy">
                    Sophisticated and cutting-edge solutions for edgy and out-of- the-box projects
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    <h1>EFFICIENT</h1>
                    <div class="intro-copy">
                    Space-efficient and cost-effective developments
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    <h1>SMART INTEGRATION</h1>
                    <div class="intro-copy">
                    Technology integration to enhance standards of living and maximize resources
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    <h1>CREATIVE DESIGNS</h1>
                    <div class="intro-copy">
                    Iconic design solutions and memorable developments
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    <h1>COMPREHENSIVE SERVICE PROVIDERS</h1>
                    <div class="intro-copy">
                    Specializing in a wide range of multi-disciplinary services
                    </div>
                  </div>
                </div>
            </div>
        </div>
        <!-- Remeber to put all the content you want on top of the slider below the slider code -->
    </header>

Answer 1

问题在new-age.min.css中，以下：

@media (min-width: 768px)
header {
    min-height: 100%;
}

您可以在CSS中添加并强制CSS中的标头高度，而无需介质，因此对于所有屏幕尺寸。添加页面的头部此样式：

<style type="text/css">
   header {
      min-height: 100%;
   }
</style>