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

Posted 2020-07-03 『卟倒翁』...佳

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

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

在使用

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

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

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

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

可是我的电脑只有60Hz ，那么问题来了，很多小伙伴的电脑或许跟我的一样，那怎么办呢？经过多方查找，终于找到了这么一个属性

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

背景关联

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

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

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

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

找到原因所在，接下来就很愉快了，只需要把背景设置成

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

说句题外话，以前在学css的时候，肯定有学过这个属性，可是没放在心上，看来以后学东西还是需要多思考。

那么还有个问题，为什么在Google下没问题呢？