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下没问题呢?

时间: 2024-10-13 16:01:20

css控制背景图像不随滚动条的滚动而滚动的相关文章

网页设计入门--使用css控制背景图像

一.设置背景页面背景颜色 background-color:color; 二.设置背景颜色给页面分块 通过background-color属性,不仅可以设置整个网页页面背景颜色,也可以对页面进行分块,分别设计每个分块的背景颜色 上图对应的代码为: 1 <html> 2 <head> 3 <title>my first text html</title> 4 <style type="text/css"> 5 6 body{ 7

CSS控制背景图片100%自适应填充布局

原文地址:http://blog.csdn.net/wd4java/article/details/50537562 .personal_head { width: 100%; height: 35%; background: url("../../../static/img/headbg.jpg") no-repeat; background-size: 100% 100%; position: absolute; filter: progid:DXImageTransform.Mi

转 Div+Css控制背景图片水平垂直居中显示 背景铺满全屏

在Web开发中我们经常要碰到这样的问题:在为一个页面设置背景图片之后往往希望图片能够在分辨率比较大的情况下水平垂直都居中显示.通常水平居中显示在Css中是很容易做到的,而垂直居中就需要使用一些Css的技巧: 1. 首先为了能使得网站能够根据浏览器大小自适应,我们需要将页面的body元素height值设为100%,而在这之前,我们需要将xhtml验证从网站头删除.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

css控制背景图片在浏览器中居中,下拉浏览器的时候背景图一直不变

如 http://www.gm.com/ css样式如下 1 body{ margin:0; padding:0;} 2 #con{ 3 position:absolute; 4 top:0; 5 left:0; 6 height:100%; 7 width:100%; 8 background-image:url("maskimg/star.jpg"); 9 background-position: center 0; 10 background-repeat: no-repeat;

CSS控制背景

------------------CSS2------------------------------------------------------- 1.background: 2.background-color: 3.background-image: url();默认背景图片在元素的左上角显示 4.background-repeat: repeat\no-repeat\repeat-x\repeat-y; 5.background-position:  横向 纵向:(数值[百分数/坐

20-css控制背景与css精灵

CSS控制背景 背景 background:颜色 图片 平铺方式 固定方式 位置 背景颜色 background-color:red: 背景图像 background-image:url(背景图像的位置及全称) 背景图片的重复方式 background-repeat:[repeat.no-repeat.repeat-x.repeat-y] x坐标y坐标[第一个值是水平位置,第二个是垂直位置]左上角0 0.单位是像素(0px 0px) 背景图像的位置 background-position:top

何时使用img标签,何时使用background-image背景图像

在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然? 如下场景使用img标签比较合适: 1.如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人),使用Img标签加上alt属性. 2.如果你想打印页面并且你想要的图像包括默认情况下使用IMG. 3.使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标.这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器. 4.如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时

css样式-背景 background-attachment

background-attachment:背景图像是否固定或者随着页面的其余部分滚动. scroll 默认值.背景图像会随着页面其余部分的滚动而移动. fixed 当页面的其余部分滚动时,背景图像不会移动. inherit 规定应该从父元素继承 background-attachment 属性的设置.

CSS:背景颜色/背景图像

使用CSS可以为html标签指定背景图像或背景颜色,并且可以设置图像的位置. 代码整理自w3school:http://www.w3school.com.cn <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-