我如何使用CSS改变我的背景上滚动？ [英] How do I change my background on scroll using CSS?

问题描述

我的网站拥有完美的整页的背景图像。我抓起code为从 CSS技巧的。

如果您访问我的网站你可以在行动中看到它。

我想知道的是什么，是有办法，一旦你滚动一定的长度，我可以有这样的图像变化不同的图像？

我的目标是有相同的形象，但与语音泡出来的狗的嘴和我猜2图像将做到这一点。

这是可能的CSS只做??????

下面是我目前使用code。

  HTML {
背景：网址（http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg）不重复中心中心固定;
-webkit-背景大小：盖;
-moz-背景大小：盖;
-o-背景大小：盖;
背景大小：盖;
}
 

解决方案

正如其他人已经说过，NOP，你不仅可以用 CSS ，但有点 JS code 能为你做到这一点。

例

 的jQuery（窗口）.scroll（函数（）{
    VAR fromTopPx = 200; //触发距离
    变种scrolledFromtop = jQuery的（窗口）.scrollTop（）;
    如果（scrolledFromtop＆GT; fromTopPx）{
        jQuery的（'HTML'）addClass（'滚动'）。
    }其他{
        jQuery的（HTML）removeClass移除（'滚动'）。
    }
}）;
 

而在你的CSS文件：

  HTML {
    背景重复：不重复;
    背景位置：中心中心;
    背景附件：固定;
    -webkit-背景大小：盖;
    -moz-背景大小：盖;
    -o-背景大小：盖;
    背景大小：盖;
}HTML {
    背景图像：网址（http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg）;
}html.scrolled {
    背景图像：网址（http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg）;
}
 

所以基本上要添加或从上面一段距离与 JavaScript的去除类的 HTML标记 （jQuery的在这种情况下）...和 CSS ，改变这种形象。

现在的..你可以应用一些过渡到图像，或者用code发挥使得它的slideToggle例如，而不是改变类....和许多许多其他的选择。

好运气

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

My website has THE PERFECT FULL PAGE BACKGROUND IMAGE. I grabbed the code for it from css tricks.

If you visit my site you can see it in action.

What I'd like to know is, is there a way I can have this image change to a different image once you scroll a certain length?

My aim is to have the same image but with a speech bubble coming out of the dogs mouth and I'm guessing 2 images will do this.

Is this possible to do in CSS only??????

Here is the code I am currently using.

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

解决方案

As others already said, Nop, you can't only with CSS, but a little js code can do it for you.

Ex.

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

And in your CSS file:

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

So basically you are adding or removing a class to the HTML tag at some distance from the top with javascript (jQuery in this case)... and with CSS, changing that image.

Now on.. you can apply some transitions to the image, or play with the code to made it slideToggle for example instead changing the class.... and many many other options.

Good luck

EDIT: Fiddle example: http://jsfiddle.net/pZrCM/

这篇关于我如何使用CSS改变我的背景上滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！