1109人阅读
body {background:#426DAD url(/mblogpic/d86bdc30ae8fc8a43e5e/2000) rep}
我们在做网页的时候，当背景是一张完整的图片，不动让其跟随滚动条滚动，怎么办？下面详细讲解一下。
CSS代码示例-背景颜色属性(background-color)
&html& &head& &title&背景颜色 background-color&/title& &style type=&text/css&& body {background-color:#99FF00;} &/style& &/head&
&body& &p&这个HTML使用了CSS的background-color属性，将HTML的背景颜色变成翠绿色。&p& &/body& &/html&
演示结果：&这个HTML使用了CSS的background-color属性，将HTML的背景颜色变成翠绿色。
CSS代码示例-背景图片属性(background-image)
&html& &head&&title&背景图片background-image&/title&&/head&
&body style=&background-image:url(../images/css_tutorials/background.jpg)&& &p&这个HTML使用了CSS的background-image属性，设置了背景图片。&p& &/body& &/html&
演示结果：&这个HTML使用了CSS的background-image属性，设置了背景图片。
CSS代码示例- 背景重复属性(background-repeat)
&html& &head& &title&背景重复 background-repeat&/title& &style type=&text/css&& body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y} &/style& &/head&
&body& &p&这个HTML使用了CSS的background-repeat属性，使背景图片竖向重复。&p& &p&常用的background-repeat的属性值有: repeat-x(横向重复)，repeat-x(横向重复), no-repeat(不重复)。&/p& &p&background-repeat属性要和background-image一起用。&/p& &/body& &/html&
演示结果：&这个HTML使用了CSS的background-repeat属性，使背景图片竖向重复。 常用的background-repeat的属性值有:
repeat-x(横向重复)，repeat-x(横向重复), no-repeat(不重复)。 background-repeat属性要和background-image一起用。
CSS代码示例-背景附着属性(background-attachment)
&html& &head& &title&背景附着属性 background-attachment&/title& &style type=&text/css&& body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no- background-attachment:fixed} &/style& &/head&
&body& &p&这个HTML使用了CSS的background-attachment属性，将背景图片固定，不随内容滚动而滚动。&p& &p&背景附着(background-attachment)属性有两个值。一个是scroll，表示随内容滚动而动；一个是fixed，表示固定不动，不受内容滚动影响。缺省值是scroll。&/p& &p&background-attachment要和background-image一起用。&/p&
&/body& &/html&
演示结果：&这个HTML使用了CSS的background-attachment属性，将背景图片固定，不随内容滚动而滚动。
背景附着(background-attachment)属性有两个值。一个是scroll，表示随内容滚动而动；一个是fixed，表示固定不动，不受内容滚动影响。缺省值是scroll。
background-attachment要和background-image一起用。
这个HTML使用了CSS的background-attachment属性，将背景图片固定，不随内容滚动而滚动。
背景附着(background-attachment)属性有两个值。一个是scroll，表示随内容滚动而动；一个是fixed，表示固定不动，不受内容滚动影响。缺省值是scroll。
CSS代码示例-背景位置属性(background-position)
&html& &head& &title&背景位置属性 background-position&/title& &style type=&text/css&& body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no- background-position:20px 60px} &/style& &/head& &body& &p&这个HTML使用了CSS的background-position属性。这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。&/p&
&p&上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。&/p& &/body& &/html&
演示结果：&这个HTML使用了CSS的background-position属性。这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。
上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。
CSS代码示例-背景属性(background)
&html& &head& &title&背景属性 background&/title& &style type=&text/css&& body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px} &/style& &/head&
&body& &p&这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。&/p& &p&这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。&/p&
&/body& &/html&
演示结果：&这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image,
background-repeat, backgroundattachment, background-position。
这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。
这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：589419次
积分：8645
积分：8645
排名：第1997名
原创：350篇
转载：140篇
评论：13条
(2)(1)(1)(6)(1)(3)(2)(11)(11)(8)(4)(4)(7)(1)(2)(2)(1)(3)(4)(11)(18)(4)(1)(3)(4)(7)(1)(8)(1)(4)(1)(3)(13)(5)(5)(1)(9)(10)(24)(34)(18)(21)(16)(17)(20)(7)(4)(1)(15)(20)(31)(40)(43)我现在使用的浏览器是Chrome版本 32.0.1664.3 m Aura，发现该版本的Chrome每次打开页面滚动页面对于position:fixed的元素会抖动，然而在重新应用position:fixed，抖动就不存在了，或者F5刷新页面后也不会抖动。
抖动的情况
我的测试代码
&!DOCTYPE html&
&meta http-equiv=&content-type& content=&text/ charset=UTF-8&&
&title&&/title&
&style type='text/css'&
.fixbutton{
padding: 1
border: 1px solid #C8C8C8;
background: #FF4F4F;
.fixedheader{
padding: 1
background: #7E7EFF;
&div class=&fixedheader&&fixed header&/div&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&div class=&fixbutton&&fixed button&/div&
&script src=&/jquery-1.7.2.min.js&&&/script&
大家先看看视频
重新设置position发现不会抖动了。
您的浏览器不支持 video 标签。
引入jQuery1.7.2不会抖动了。但是引入1.11.0发现还是会抖动
您的浏览器不支持 video 标签。
其他浏览器的情况
我的电脑上的其他浏览器（Chromium 版本 30.0.1592.0 、Firefox 27.0.1 、 IE9）无抖动问题。
寻找其他人的浏览器，Chrome 33 无此抖动问题。
因此此问题应该是部分浏览器的问题，非全部的问题。
目前可能可以解决的方法
目前可以解决的方法我也尝试了一些，只剩下几个。
第一种，给fixed的元素添加css的样式，我试过，这个可以解决此闪动的问题。
-webkit-transform: translateZ(0);
第二种，设置css。我是在不复杂的页面做的测试。
html, body {height:100%;overflow:margin: 0;}
注意，引入这个CSS可能会导致原来的页面布局出现问题，慎重。我的同事也说，这个是为了解决IE6系列的fixed抖动问题。
第三种，引入jquery1.7.2的类库。
&script src=&/jquery-1.7.2.min.js&&&/script&
引入jQuery的方法不知道为什么可以，但是引入了1.11.0的版本就无法解决这个问题。很奇怪。
声明：未经允许禁止转载 东东东
陈煜东的博客 文章，谢谢。如经授权，转载请注明： 转载自本文链接地址:
Copyright & 20171962人阅读
ios系统和某些移动端:fixed不兼容性，没有任何效果，但可以hack一下就可以了，代码如下:
ps：想在哪个标签加背景，可以在它class后:before.
content: ' ';
position: fixed;
z-index: -1;
bottom: 0;
background: url(path/to/image) center 0 no-repeat;
background-size: cover;
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：35542次
排名：千里之外
原创：47篇
转载：19篇
(2)(1)(1)(3)(2)(6)(10)(3)(10)(1)(6)(1)(4)(4)(1)(11)