CSS background-attachment 属性

示例

不会随页面滚动的背景图片（已修复）：

body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

下面有更多 "亲自试一试" 示例。

定义和用法

这个background-attachment属性设置背景图片是否与页面的其余部分一起滚动，或者是固定的。

默认值：	滚动
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS1
JavaScript 语法：	对象.style.backgroundAttachment="fixed"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
background-attachment	1.0	4.0	1.0	1.0	3.5

CSS 语法

background-attachment: scroll|fixed|local|initial|inherit;

属性值

Value	Description
scroll	The background image will scroll with the page. This is default
fixed	The background image will not scroll with the page
local	The background image will scroll with the element's contents
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

示例

将随页面滚动（滚动）的背景图片。这是默认的：

body {
  background-image: url("img_tree.gif");
  background-repeat: no-repeat;
  background-attachment: scroll;
}

亲自试一试 »

示例

如何创建简单的视差滚动效果（创建 3D 深度的错觉）：

.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");

/* Set a specified height, or the minimum height for the background image */
min-height: 500px;

/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;

/* Center the background image */
background-position: center;

/* Set the background image to no repeat */
background-repeat: no-repeat;

/* Scale the background image to be as large as possible */
background-size: cover;
}