Question

我使用渐进式CSS来设置我的网站背景图像。我已经找到了一些关于使用jQuery循环遍历图像的教程，但是我还没有看到任何可以通过CSS完成的。所有这些都是HTML。我怎么能这样做，以便Jquery或Javascript循环通过图像，而不必创建一个div来执行此操作。

我的CSS：

html {
background: url('../assets/homepage.jpg') no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 1

您确定可以这样做，但图片更改时不会有任何转换：

html, html.slide1 {
    background: url('../assets/homepage1.jpg') no-repeat center center fixed; 
    /* add vendor prefixes */
    background-size: cover;
}
html.slide2 {
    background-image: url('../assets/homepage2.jpg');
}
html.slide3 {
    background-image: url('../assets/homepage3.jpg');
}

$(function () {
    var classList = ['slide1', 'slide2', 'slide3'],
        $html = $('html'),
        last = classList.length - 1,
        current = 0;

    setInterval(function () {
        current = current == last ? 0 : current + 1;
        $html.prop('class', classList[current]);
    }, 1000);
});

这是小提琴：http://jsfiddle.net/rmR7V/

Answer 2

尝试在屏幕外滑动背景图像，更改它并将其重新滑动。

<style>
html {
background: url('Image1.jpg') no-repeat center center fixed; 
background-size: cover;
}
</style>

<script type="text/javascript">
$(document).ready( function() {
    $('html').animate({
        "background-position": -2048
    },2000, function() {
        $('html').css('background-image',"url('Image2.jpg')");
        $('html').animate({
        "background-position": 0
        },2000);
    });
});
</script>

用jquery骑自行车穿过背景

2 个答案: