Question

我的网站拥有完美的页面背景图像。我从css tricks抓取了代码。

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

我想知道的是，有一种方法可以让您在滚动一定长度后将此图像更改为其他图像吗？

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

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

实施例

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

在你的CSS文件中：

HTML tag

所以基本上你是在javascript与CSS（在这种情况下为jQuery）...以及与{{1}}相距一定距离的位置添加或删除一个类，图像。

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

祝你好运

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

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

1 个答案: