我使用 css 和 js 制作了一个简单的 slider ,js 将 bg-image 添加到标题,并使用一组图像进行幻灯片放映。我还在 bg-image 中添加了一个带有 css 的过渡,以产生一种淡出效果,但我无法在 Edge、IE 10/11 和 Firefox 上使用此过渡,它在 Opera 和 Chrome 中运行良好。我试过使用 -moz- 、 -ms- transition ,但仍然无效。我也试过用 js 添加过渡,但它仍然不起作用。
这是标题
<header id="home">
<nav>
<div class="riga">
<img src="resources/img/logo.png" alt="Site- Logo" class="logo">
<ul class="main-nav">
<li><a href="#home">home</a></li>
<li><a href="#informazioni">informazioni</a></li>
<li><a href="#servizi">servizi</a></li>
<li><a href="#lavori">lavori</a></li>
<li><a href="#contatti">contatti</a></li>
</ul>
</div>
</nav>
<div class="riga">
<div class="messaggio">
<h1>Test</h1>
<p class="esp">Test <span>2</span></p>
</div>
</div>
</header>
这是CSS
header {
-webkit-transition: background-image 1s linear;
-moz-transition: background-image 1s linear;
-ms-transition: background-image 1s linear;
-o-transition: background-image 1s linear;
transition: background-image 1s linear;
background-image: url();
background-size: cover;
background-attachment: fixed;
background-position: center;
height: 100vh; }
这是js
var images=new Array('resources/js/img/1.jpg','resources/js/img/2.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('header')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
setTimeout(doSlideshow,5000);
});
}
我该如何解决这个问题?
最佳答案
background-image
不是动画属性 ( W3.org )。
正如您所注意到的,某些浏览器已经实现了对它的支持(Chrome、Safari、Opera),但您必须创建一个与您需要的所有浏览器兼容的解决方案。这通常是通过将图像叠加在一起并使用 opacity
在它们之间淡化来实现的。
关于javascript - CSS 过渡淡入淡出背景图像在 IE 和 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46254500/