前两张幻灯片上的全屏 Bootstrap 轮播很笨重

Question

我一直在通过 Stack Overflow 进行搜索，并且之前看到过这个问题，但是我为自己尝试过的任何答案都没有奏效，如果我发布了一个之前已经被问过的问题，很抱歉，但由于某种原因我无法让它工作！

我正在尝试为 Wordpress 主页实现全屏引导轮播，其中幻灯片是设置为 background-size:cover 的背景图像。图像还需要从一个渐变到下一个。但是，我显然做错了，因为前两张幻灯片正在褪色为白色（Firefox 中为黑色）。

谁能帮我解决这个问题，以便顺利过渡？

谢谢。

这是 HTML：

<div id="myCarousel" class="carousel container slide carousel-fade">
 <div class="carousel-inner">
  <div class="active item one">
   <div class="carousel-caption">
    <h2><a href="http://www.topographicwebdesign.co.uk/work-    form/category/work/#astral">Astral Pattern</a></h2>
   </div>
  </div>
  <div class="item two">
   <div class="carousel-caption">
    <h2><a href="http://www.topographicwebdesign.co.uk/work-form/category/work/#shark">Imaginary Music - La Shark</a></h2>
   </div>
  </div>
  <div class="item three">
   <div class="carousel-caption">
    <h2><a href="http://www.topographicwebdesign.co.uk/work-form/category/work/#troubled">Troubled Waters</a></h2>
   </div>
  </div>
 </div>
 <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a><a class="carousel-control right" href="#myCarousel" data-slide="next">    </a>
</div>

这是 CSS：

.carousel .item {
    position: fixed;
    width: 100%; 
height: 100%;
}
.carousel .one {
    background: url('http://www.topographicwebdesign.co.uk/work-form/wp-  content/uploads/2016/01/Bunhill-Walking-Map_small.jpg') no-repeat center  center;
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .two {
    background: url('http://www.topographicwebdesign.co.uk/work-form/wp-   content/uploads/2016/01/Imaginary-Music_small.jpg') no-repeat center center;
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .three {
    background: url('http://www.topographicwebdesign.co.uk/work-form/wp-content/uploads/2016/01/Sir-Johns-Nose_small.jpg') no-repeat center center;
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .active.left {
    left:0;
    opacity:0;
    z-index:2;
}
.carousel-control.left,.carousel-control.right{
    width:10px;
    height:10px;
    border-radius:25px;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    background-color:white;
    position:fixed;
    background-image:none;
}
.carousel-caption{
    position:absolute;
    bottom:10px;
    left:0;
    right:0;
    text-shadow:none;
}
.carousel-control {
    cursor:pointer;
}
.carousel-control.left {
    left:10px;
    right:auto;
    top:50%;
} 
.carousel-control.right {
    right:10px;
    top:50%;
}
a.carousel-control:hover{
    background-color:white;
}
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
  transition-duration: .8s;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: .8s;
  -moz-transition-property: opacity;
  -moz-transition-duration: .8s;
}
.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;
}

这里是javascript：

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.carousel').carousel({interval: 5000});
  });
</script>

Answer 1

可能是位于顶部下方的幻灯片尚不可见吗？设置 display: block 和/或 visibility: visible 对所有 .item 元素有帮助吗？

Answer 2

检查您在背景上的 URL 是否有 .one 和 .two 类。网址中有空格。

你能发布 javascript 来模拟过渡吗？