我一直在搜索Stack Overflow并且之前已经看到过这个问题,但是我为自己尝试过的任何答案都没有起作用,所以对不起我是不是发布之前已被问过的问题,但由于某种原因,我无法让它发挥作用!
我正在尝试为Wordpress主页实现全屏引导旋转木马,其中幻灯片的背景图像设置为背景大小:封面。图像也需要从一个淡入淡出。然而,我显然做错了,因为前两张幻灯片正在淡出白色(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>
答案 0 :(得分:0)
可能是位于顶部下方的幻灯片还不可见吗?设置显示:块和/或可见性:在所有.item元素上都可见吗?
答案 1 :(得分:0)
在背景上检查您的URL .one和.two。 URL中有空格。
你可以发布javascript来模拟过渡吗?