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

Question

我的网站有完美的全页背景图片。我从css tricks 获取了它的代码。

如果您访问我的网站，您可以看到它的实际效果：<site no longer available>

我想知道的是，有没有办法让我在滚动一定长度后将此图像更改为不同的图像？

我的目标是拥有相同的图像，但从狗嘴里冒出一个对话泡泡，我猜 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;
}

Answer 1

正如其他人已经说过的，不，你不能只用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);
}

所以基本上你是用javascript（在这种情况下是jQuery）在距离顶部一定距离的HTML tag中添加或删除一个类......以及CSS，改变那个图像。

现在……您可以对图像应用一些过渡效果，或者使用代码使其成为 slideToggle，而不是更改类……以及许多其他选项。

祝你好运

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