局部滚动容器背景色需设在有明确高度且未塌陷的容器上，推荐用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 解决遮挡，它只混合颜色，不改变层叠顺序

滚动区域背景看着“不对劲”，八成不是颜色写错了，而是盒模型没立住，或者层叠关系被某个隐式属性悄悄改写了。