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

Question

我的网站有完美的页面背景图像.我从css技巧中抓取了它的代码.

如果您访问我的网站,您可以看到它的实际效果.

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

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

这只能在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;
}

Answer 1

正如其他人已经说过的那样,Nop,你不仅可以CSS,而且js code可以为你做一点.

防爆.

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);
}

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

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

祝好运

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