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

Question

我使用 css 和 js 制作了一个简单的滑块，js 将 bg-image 添加到标题中，并使用一组图像进行幻灯片放映。我还在 bg-image 中添加了一个带有 css 的过渡以产生一种淡出效果，但我无法在 Edge、IE 10/11 和 Firefox 上实现这种过渡，它在 Opera 和 Chrome 中运行良好。我试过使用 -moz- ， -ms- 过渡，但它仍然不起作用。我也尝试过用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 淡化来实现的。