6

我的网站有完美的全页背景图片。我从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;
}
4

1 回答 1

12

正如其他人已经说过的那样，不，您不仅可以使用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/

于 2013-07-11T08:35:13.560 回答