局部滚动容器背景色需设在有明确高度且未塌陷的容器上，推荐用height/max-height（px/vh/rem），flex中加flex-shrink: 0；background-attachment: local可使背景随内容滚动，但需配合overflow生效且注意safari兼容性。
局部滚动容器的背景色必须设在外层包裹元素上
直接给 overflow-y: auto 的容器设 background-color 是可行的，但前提是它本身有明确尺寸且未被塌陷。常见错误是：容器是 flex 子项却没加 flex-shrink: 0，或高度用 % 但父级高度未定义，导致背景“看不见”——其实不是没生效，是容器高度为 0。
正确做法是确保该滚动区域有可渲染的盒模型：
- 显式设置
height或max-height（推荐用px、vh或rem） - 若在 flex 布局中，给它加
flex-shrink: 0防止被压缩 - 避免仅依赖
min-height，它不触发滚动上下文计算 - 不要用
overflow: hidden掩盖问题，它会直接禁掉滚动能力
用 background-attachment: local 让背景随内容滚动
如果滚动区域里有长文本或列表，你希望背景图跟着文字一起动（比如渐变底纹对齐每一行），就得用 background-attachment: local。它和 fixed 完全相反：fixed 锁死在视口，local 锁死在内容盒内。
注意几个关键点：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 只对设置了
overflow的容器生效，单独写无效 -
background-position仍按容器边界计算，不是按内容起始点 - Safari 15.4 之前有兼容问题，滚动时背景可能跳帧或卡住
- 别和
background-size: cover混搭——cover 会缩放适配容器，而 local 滚动时缩放中心不变，容易露出空白边
滚动区域带圆角/阴影时背景怎么不溢出
当给局部滚动容器加 border-radius 或 box-shadow，背景色常从圆角缺口或阴影下方透出白色（浏览器默认背景）。这不是 bug，是滚动内容层默认绘制在背景层之上。
解决方法很简单：
- 给容器加
overflow: hidden（不是禁滚动，而是裁切子元素溢出） - 确保背景色设在该容器自身，而非其子元素
- 避免用伪元素（如
::before）模拟背景——滚动容器不支持伪元素参与滚动层叠 - 如果用了
backdrop-filter，记得加background-color: rgba(255,255,255,0.8)做降级，否则 iOS 上毛玻璃失效时背景全透明
嵌套滚动时外层背景被遮挡怎么办
比如一个 modal 弹窗里有局部滚动列表，modal 本身有半透明遮罩背景，但滚动时列表内容会盖住遮罩——这是因为滚动容器创建了新的层叠上下文，且默认 z-index 比遮罩高。
关键不是调 z-index，而是控制层叠源头：
- 给滚动容器设
isolation: isolate，防止它意外提升子元素层级 - 遮罩层（如
.modal-overlay）用position: fixed+z-index: 999，确保它始终在滚动内容之上 - 滚动容器内部若用
position: relative元素，检查是否无意触发了新层叠上下文（比如加了opacity或transform） - 不要指望
background-blend-mode解决遮挡，它只混合颜色，不改变层叠顺序
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
