background-attachment: fixed 在局部滚动容器中不被支持，仅对根元素或满足特定条件的块级容器生效；local 可实现背景随内容滚动，需配合 repeat、overflow-y: auto 等属性；模拟固定效果需用 fixed 定位+JS 补偿。
局部滚动容器里的背景图没法用 background-attachment: fixed 固定——它压根不被支持，不是你写错了，是 CSS 规范就禁止这么用。
为什么 table、div 或 pre 上设 background-attachment: fixed 没反应
CSS 明确规定：background-attachment: fixed 只对根元素（html）或设置了 overflow: hidden 且 position 不为 static 的块级容器生效。而局部滚动容器（比如带 overflow-y: auto 的 div、table、pre）既不是根元素，也不满足该锚定条件。
常见现象包括：
- DevTools 里样式显示为“已应用”，但背景图照样随内容滚动
- 在 iOS Safari 和 Chrome for Android 上完全静默失效，连降级提示都没有
- 给
td或th加该属性，浏览器直接忽略，不报错也不渲染
background-attachment: local 是真能用的局部固定方案
local 不是“本地化”，而是让背景图随容器内可滚动内容一起动——文字往上滚，背景纹理也跟着往上滑，视觉上始终贴着内容，不会被截断或错位。
立即学习“前端免费学习笔记（深入）”；
适用场景：
- 长代码块（
<pre>）里加点阵/网格背景，希望每行文字都“浮”在纹理上 - 带滚动的卡片列表，背景图需随卡片内容同步位移，避免露出空白或重复接缝
- 文档类页面中，段落背景要随文字自然流动，而非钉死在容器左上角
必须配齐这些才能稳住效果：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
background-repeat: repeat（否则只铺一次，滚动后大片留白） -
overflow-y: auto（或scroll），否则没有滚动上下文，local退化为scroll -
background-size建议用auto或具体像素值，别用cover——它会强制缩放，破坏“跟随感”
示例：
code-block {
background-image: url('dots.png');
background-attachment: local;
background-repeat: repeat;
overflow-y: auto;
height: 300px;
}
想让局部容器背景“看起来固定”，得用 position: fixed + 定位微调
当 local 不够用（比如你要的是“视口级固定”，而不是“内容跟随”），就得手动模拟：把背景图抽成独立层，用 position: fixed 锚在视口，再靠 JS 动态补偿滚动偏移。
关键点：
- 不能直接给局部容器设
background，得用伪元素（如container::before）或额外<div class="bg-layer"> -
z-index要比容器低（如-1），否则盖住内容；同时加pointer-events: none，不然点不到里面元素 - 监听的是容器自身的
scrollTop/scrollLeft，不是window.scrollY - 移动端必须节流（
requestAnimationFrame或setTimeout防抖），否则touchmove触发太密，UI 卡顿
简单示意（仅核心逻辑）：
const container = document.querySelector('.scrollable');
const bgLayer = container.querySelector('.bg-layer');
container.addEventListener('scroll', () => {
bgLayer.style.transform = `translateY(${-container.scrollTop}px)`;
}, { passive: true });
别踩 transform 和 will-change 这两个坑
哪怕只是给局部容器加了 transform: translateZ(0) 或 will-change: transform，也会导致 background-attachment: local 在部分 Chrome 版本中静默退化为 scroll；更严重的是，它会让整个容器脱离普通文档流，使 fixed 定位层错位。
排查建议：
- 用 DevTools 检查容器 computed styles，看
transform是否意外生效（有些重置库、动画库会全局注入） - 临时注释掉所有
will-change相关声明，确认是否恢复预期行为 - 若必须硬件加速，优先用
contain: layout paint替代transform: translateZ(0)
真正麻烦的从来不是怎么写，而是怎么让不同滚动层级之间不打架——局部滚动容器、body 滚动、dialog 弹层、fixed 导航栏，它们各自的定位上下文和合成层稍一错位，背景就飘了。动手前先理清谁在滚、谁在锚、谁在盖，比堆属性重要得多。
