如何使用CSS更改滚动背景？

我的网站有完美的页面背景图像.我从 css tricks开始抓取它的代码.

如果您访问my site,您可以看到它的实际效果.

我想知道的是,有一种方法,一旦你滚动一定长度,我可以将这个图像更改为不同的图像吗？

我的目标是拥有相同的图像,但是从狗嘴里出来一个讲话泡泡,我猜这2张图片会做到这一点.

这只能在CSS中做吗??????

这是我目前使用的代码.

html { 
background: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

解决方法

正如其他人已经说过的那样,nop,你不仅可以使用CSS,而且一些js代码可以为你做到.

防爆.

jQuery(window).scroll(function(){
    var fromToppx = 200; // distance to trigger
    var scrolledFromtop = jQuery(window).scrollTop();
    if(scrolledFromtop > fromToppx){
        jQuery('html').addClass('scrolled');
    }else{
        jQuery('html').removeClass('scrolled');
    }
});

在你的CSS文件中：

html {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

html {
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}

html.scrolled {
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}

所以基本上你是使用javascript(在这种情况下为jQuery)在距离顶部一定距离的HTML标记中添加或删除一个类…并且使用CSS更改该图像.

现在…你可以对图像应用一些过渡,或者使用代码来使其成为slidetoggle,例如改变类……以及许多其他选项.

祝你好运

编辑：
小提琴示例：http://jsfiddle.net/pZrCM/

原文地址：https://www.jb51.cc/css/217647.html