Question

我使用css和js创建了一个简单的滑块，js将bg-image添加到标题中，并使用图像数组进行幻灯片放映。我还添加了一个带有css到bg-image的转换以产生一种淡出效果，但是我无法在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在它们之间淡化来实现。

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

1 个答案: