css控制背景图像不随滚动条的滚动而滚动

这几天在写一个demo,设置背景图像,css

background: url("../images/bg.jpg") repeat ;

在使用google

$(window).scroll(function() {
....
});

监听滚动条时,在google下正常运行,背景图像没有异常url

在ie、360、火狐下滚动滚动条时,背景图像一闪一闪的,很难受。ssr

百度:说须要调显示器的监视器的屏幕刷新频率 > 70 Hz 。code

但是个人电脑只有60Hz ,那么问题来了,不少小伙伴的电脑或许跟个人同样,那怎么办呢?通过多方查找,终于找到了这么一个属性文档

 background-attachment 属性 原文是这样讲的get

背景关联

若是文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。it

您能够经过 background-attachment 属性防止这种滚动。经过这个属性,能够声明图像相对于可视区是固定的(fixed),所以不会受到滚动的影响:io

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  
  }background-attachment:fixed

background-attachment 属性的默认值是 scroll,也就是说,在默认的状况下,背景会随文档滚动。function

找到缘由所在,接下来就很愉快了,只须要把背景设置成

background: url("../images/bg.jpg") repeat fixed ;

说句题外话,之前在学css的时候,确定有学过这个属性,但是没放在心上,看来之后学东西仍是须要多思考。

那么还有个问题,为何在Google下没问题呢?

相关文章
相关标签/搜索