CSS background-attachment 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

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

background-attachment使用fixed时，背景定位 (background-position) 是相对于视口而非元素。

默认值：	scroll
继承性：	否
可动画性：	否。请参阅：可动画属性。
版本：	CSS1
JavaScript 语法：	object.style.backgroundAttachment="fixed"

常用的实例

接下来通过多个实例演示background属性的用法，来深化您对background属性的理解。

实例代码运行代码

复制

/* 默认值，背景随元素滚动 */
.example1 {
    background-attachment: scroll;
}

/* 背景固定于视口 */
.example2 {
    background-attachment: fixed;
}

/* 背景随元素内容滚动 */
.example3 {
    background-attachment: local;
    overflow: scroll; /* 需要有滚动机制 */
}

CSS 语法

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

属性值

值	描述
`scroll`	背景图像会随着页面其余部分的滚动而移动。
`fixed`	背景图像相对于视口固定，不会随着页面或元素的滚动而滚动。
`local`	背景图像相对于元素的内容固定。
`initial`	将此属性设置为其默认值（scroll）。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。