我的网站有完美的页面背景图像.我从
css tricks开始抓取它的代码.
我想知道的是,有一种方法,一旦你滚动一定长度,我可以将这个图像更改为不同的图像吗？
我的目标是拥有相同的图像,但是从狗嘴里出来一个讲话泡泡,我猜这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/
