zoukankan      html  css  js  c++  java
  • css控制背景图像不随滚动条的滚动而滚动

    这几天在写一个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下没问题呢?

  • 相关阅读:
    设计模式第四篇-工厂模式
    设计模式第三篇-装饰者模式
    设计模式第二篇-观察者模式
    设计模式第一篇-策略模式
    一元多项式的加/减法运算
    圆桌问题
    求有序序列的交集(链表)
    悲剧文本
    求序列的交集(链表)
    集合的操作
  • 原文地址:https://www.cnblogs.com/i-jia/p/5347451.html
Copyright © 2011-2022 走看看