全屏平铺背景应使用 background-size: 100% 100%，它强制拉伸填满且不留白，适合网格等规整纹理图；cover 是等比缩放加裁剪，不满足“无缝平铺”需求。
全屏平铺背景用 background-size: 100% 100% 还是 cover？
用 background-size: 100% 100% 才能真正“无缝平铺”——它强制拉伸图片填满容器，不裁剪、不留白，适合图案规整的纹理图（如网格、点阵、几何重复图）。而 background-size: cover 是等比缩放+裁剪，本质不是平铺，只是视觉上“看起来满”，但会丢失边缘内容，且无法保证接缝对齐。
常见错误是把“全屏”和“铺满”混为一谈：前者强调尺寸适配视口，后者强调图案连续无断点。若你手头是一张小 PNG 纹理图，直接设 background-repeat: repeat + background-size: 20px 20px 更可控；若必须用大图拉伸，则 100% 100% 是唯一选择。
-
background-repeat: repeat是“平铺”的前提，漏写就只显示一张图 - 搭配
background-position: 0 0可确保左上角对齐起点，避免偏移错位 - 若拉伸后出现模糊，说明原图分辨率不足，CSS 无法修复——这不是写法问题，是素材问题
遮罩层和背景图共存时 z-index 和 pointer-events 怎么设？
遮罩层不能简单堆高 z-index 就完事。典型结构是：body 背景图 → 遮罩层（position: fixed）→ 弹窗内容。这时遮罩层的 z-index 必须严格介于二者之间，比如背景图在 z-index: 1，弹窗在 z-index: 1000，遮罩层设 z-index: 99 才安全。
更关键的是 pointer-events：默认值 auto 会拦截所有点击，这是遮罩的本意；但若你只想遮盖视觉、不阻断操作（比如做半透明水印效果），就得加 pointer-events: none。注意它不会继承，必须显式写在遮罩层上。
- 遮罩层若用
::after伪元素实现，必须确保父元素没设overflow: hidden或transform，否则伪元素可能被截断 - 不要给遮罩层或其父容器加
filter、will-change，它们会意外创建新层叠上下文，让z-index失效 - 移动端 iOS 上，仅靠 CSS 遮罩无法阻止底层滚动，必须配合 JS 设置
document.body.style.overflow = 'hidden'
为什么 top/right/bottom/left: 0 比 width/height: 100vh/vw 更可靠？
因为 100vh 在 iOS Safari 中受地址栏收放影响，滚动时高度突变，遮罩会“抽搐”或露底；100vw 则忽略垂直滚动条宽度，导致遮罩层比实际可视区窄 16px 左右，右侧留白。而 top: 0; right: 0; bottom: 0; left: 0 是固定定位的原始语义：四边钉死视口，不受任何滚动、缩放、地址栏干扰。
inset: 0 是它的现代简写，语义更清晰，但 Safari 14.0 及更早版本不支持，上线前务必检查目标用户浏览器分布。兼容写法是并行声明：
.overlay {
position: fixed;
inset: 0;
top: 0; right: 0; bottom: 0; left: 0;
}
- 漏写任意一个方向（比如只写
top: 0; left: 0），遮罩会缩成一个点——这是线上最常复现的“遮罩消失” bug - 若页面存在横向滚动，
100vw会失效，但四边0自动适应滚动后的新视口宽度 - 不要试图用
min-height: 100dvh替代——它虽解决地址栏抖动，但 Chrome 105 以下、Safari 16.4 以下完全不识别，降级风险高
rgba() 背景色和 opacity: 0.5 哪个更适合遮罩？
必须用 background-color: rgba(0, 0, 0, 0.5)。opacity 作用于整个元素及其所有后代，一旦遮罩层里未来加了文字、图标或子元素，它们全会变半透明，调试时极难定位——你以为是遮罩太淡，其实是内容被连带虚化了。
rgba() 只影响背景色本身，内容保持 100% 清晰度，这才是遮罩的正确分工：遮的是背景，不碰前景。
- 若需兼容 IE8，rgba() 不支持，得换半透 PNG 或
filter: alpha(opacity=50)，但 2026 年基本无需考虑 - 深色模式下，纯黑
rgba(0,0,0,0.5)可能对比度过高，可改用rgba(0,0,0,0.4)或监听prefers-color-scheme动态调整 - 遮罩层若叠加 backdrop-filter（如毛玻璃），必须确认父容器没设
overflow: hidden，否则滤镜区域会被裁剪
dvh 和 backdrop-filter 的实现差异——这些必须打开 DevTools 的 “Layers” 面板逐层看渲染树，不能只盯着 CSS 文件猜。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
