作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在通过 Stack Overflow 进行搜索,并且之前看到过这个问题,但是我自己尝试过的任何答案都没有奏效,如果我发布的问题之前已经有人问过,我深表歉意,但由于某种原因我无法让它工作!
我正在尝试为 Wordpress 主页实现全屏 Bootstrap 轮播,其中幻灯片是背景图像设置为背景大小:封面。图像还需要从一个淡出到下一个。但是,我显然做错了某事,因为前两张幻灯片逐渐变成白色(在 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>
最佳答案
会不会是顶部幻灯片下面的幻灯片还不可见?设置 display: block 和/或 visibility: visible 在所有 .item 元素上是否有帮助?
关于html - 前两张幻灯片上的全屏 Bootstrap 轮播笨重,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35461435/
我是一名优秀的程序员,十分优秀!