背景附着属性

最后更新：2026-09-13

background-attachment 背景附着属性

background-attachment 属性用于决定背景图像是否随页面滚动。默认 scroll 表示背景随元素内容滚动；fixed 表示背景相对视口固定，产生视差效果；local 表示背景随元素内部内容滚动。该属性常用于实现视觉特效。

background-attachment: scroll | fixed | local;

值	类型	描述
`scroll \| fixed \| local`	关键字	背景图滚动行为

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
background-attachment	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： fixed 值会创建相对视口固定的背景，常用于实现视觉差滚动效果。

注意： background-attachment: fixed 在移动端性能较差，部分移动浏览器会忽略该值。

Qbackground-attachment 的 scroll、fixed、local 有什么区别？

A三者区别在于"背景相对谁定位"。scroll（默认）：背景相对元素自身定位，页面滚动时背景随元素一起滚动；fixed：背景相对视口固定，页面滚动时背景静止不动，产生视差效果；local：背景相对元素内部内容定位，元素内部滚动（如 overflow: auto 的容器）时背景跟着内容滚动。

Q如何实现视觉差滚动效果？

A设置 background-attachment: fixed 后，背景相对视口固定，滚动时前景内容移动而背景不动，即产生视差感。经典做法是给多个区块分别设置不同背景图 + fixed，滚动时背景依次切换。注意移动端 iOS/部分浏览器会忽略 fixed，需另行处理。

Qbackground-attachment: fixed 在移动端为什么不生效？

A主要原因是性能。iOS Safari 等移动浏览器为节省内存、保证滚动流畅，把 fixed 背景降级为 scroll 处理，导致背景跟随滚动。解决思路：移动端改用覆盖式背景图，或使用 JS 视差库（如 Rellax）通过 transform 实现，仅在桌面端启用 fixed。

Qlocal 值在什么场景下使用？

Alocal 适合元素内部有滚动条的场景，例如 overflow: auto 的聊天窗口、代码块或数据列表。设置 background-attachment: local 后，背景会跟随内部内容滚动，而不是固定在容器上，视觉上更接近"内容自带的纸面底纹"效果。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。