CSS过渡淡入淡出背景图片在IE和Firefox中不起作用

Question

我使用css和js制作了一个简单的滑块，js在标题中添加了bg-image，并使用图像数组进行幻灯片显示。 我还向bg图像添加了一个带有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);
    });
 }

我该如何解决？

Answer 1

background-image不是可设置动画的属性（ W3.org ）。

您已经注意到，某些浏览器仍然实现了对它的支持（Chrome，Safari，Opera），但是您必须创建一个与所需所有浏览器兼容的解决方案。 通常，这可以通过以下方式实现：将图像彼此叠加，并在它们之间以opacity淡入淡出。