javascript - 使用 Bootstrap 3 Carousel 更改背景图像，平滑淡入淡出过渡有什么想法吗？

Question

如何在以下脚本过渡中对 background-image 属性所做的更改平滑淡入淡出？

function carousel_background() {

    // gets bootstrap 3 carousel first/active image on load.
    $(window).load(function() {
        var load_img = 'url(' + $('.active img').attr("src") + ')';

        console.log(load_img);
        $('#background-img').css('background-image', load_img);

    });

      // gets carousel next active image
    $("#carousel-example-generic").on('slid.bs.carousel', function() {

        var active_img = 'url(' + $('.active img').attr("src") + ')';
        console.log(active_img);
        $('#background-img').css('background-image', active_img);
    });
}

同时将 .on(slid.bs.carousel 更改为 .on(slide.bs.carousel 使图片的时间变化更加同步，但随后我将此“active_img”更改为之前的图像。

---

我正在尝试实现与此网站类似的东西 https://pro.beatport.com/

这是我到目前为止的尝试 http://jsfiddle.net/milkysbeta/1vt1pLrs/5/

Answer 1

您可以使用 css transition属性(property)。请注意，在撰写本文时，旧浏览器对过渡属性的支持有点缺乏，但可以使用适当的 vendor 前缀进行补充。

( Demo )

.active img {
    transition: background-image 1s linear;
}