Question

我想使用jss使用css过渡进行背景图片幻灯片放映。是否可以这样做而不淡化div中的内容？如果是这样，怎么样？请帮忙。到目前为止，我的代码没有过渡：

jQuery(window).load(function(){
var images = ['images/slide1.jpg','images/slide3.jpg','images/slide4.jpg','images/slide5.jpg','images/slide7.jpg',];
var i = 0;
var timeoutVar;

function changeBackground() {
    clearTimeout(timeoutVar); // just to be sure it will run only once at a time

    jQuery('#page').css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')';      
    });

    // call the setTimeout every time to repeat the function
    timeoutVar = setTimeout(changeBackground, 5000);
}

// Call it on the first time and it will repeat
changeBackground();        
});

Answer 1

当然有可能;您必须使用CSS transition属性。

只需添加此CSS：

#page {
    transition: background-image .7s ease-in-out;
   -moz-transition: background-image .7s ease-in-out;
   -webkit-transition: background-image .7s ease-in-out; 
   -o-transition: background-image .7s ease-in-out; 
}

每次更改background-image div的#page属性时，它都会触发持续时间为0.7秒的动画（您也可以更改该值以适合您的必需品）。

这是fiddle。

编辑：这仅适用于基于webkit的浏览器。如果我找到跨浏览器的解决方案，我会编辑它。

如何使用转换为背景图像幻灯片放映而不淡化内容？

1 个答案: