©
This document uses PHP Chinese website manual Release
background-attachment:<attachment>[ , <attachment> ]*
<attachment> = fixed | scroll |local
默认值:scroll
适用于:所有元素
继承性:无
动画性:否
计算值:指定值
fixed:
背景图像相对于窗体固定。
scroll:
背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local:
背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)
对应的脚本特性为backgroundAttachment。
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
local | 6.0-8.0 | 2.0-24.0 | ||||||
9.0+ | 25.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>background-attachment_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> body { background-image: url(skin/p_103x196_1.jpg); background-repeat: no-repeat; background-position: 50% 200px; background-attachment: fixed; } </style> </head> <body> <p>背景图像不随窗体内容滚动始终固定</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>文字内容</p> <p>背景图像不随窗体内容滚动始终固定</p> </body> </html>
点击 "运行实例" 按钮查看在线实例