您的位置:首页 - 教程 - CSS - 正文
让背景图片固定在中间,滚动内容图片不动
体验效果:
http://hovertree.com/texiao/css3/38/

实例

如何设置固定的背景图像:

body 
  { 
  background-image: url(http://hovertree.com/hvtimg/bjafjc/wpirf7t5.png); 
  background-attachment: fixed;
  }

定义和用法

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

默认值: scroll
继承性: no
版本: CSS1
JavaScript 语法: object.style.backgroundAttachment="fixed"

可能的值

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

 

 

以上的写法 如果在手机里面会出现兼容问题,怎么办??

看下面解决方法:

 

body:before{
content: ' ';
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(http://hovertree.com/hvtimg/bjafaj/hm1uwx31.jpg) top center no-repeat;
background-size: cover;
}

 

 


评论: