用 background-image 叠加 noise 纹理时，为什么背景发灰、不“透”？
因为纯 CSS 无法生成真正随机的噪声纹理，所谓 noise 实际是用 SVG 或 Base64 编码的固定小图平铺——它本身带 alpha 通道或浅灰底色，再叠一层 rgba(0,0,0,0.4) 就容易糊成一块闷重的灰，失去磨砂该有的通透颗粒感。
- 优先用 SVG Data URL 生成单色（#000）点阵噪声，避免 PNG 带预乘 alpha；示例：
url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E") -
background-blend-mode: overlay或multiply比直接叠加更可控，尤其在深色背景下能保留底层内容轮廓 - 噪声图尺寸建议 ≤ 64×64，太大平铺后颗粒感消失，太小（如 8×8）又容易显网格
深色模式下 backdrop-filter: blur() 失效或变白怎么办？
这不是你的写法错，是浏览器限制：当父容器没有明确的「可透区域」（比如被 background-color 完全覆盖），backdrop-filter 就没东西可模糊——它模糊的是「背后的内容」，不是自身颜色。
- 确保磨砂容器的父级有真实内容（文字、图片、其他 DOM），且未被
opacity: 0或visibility: hidden隐藏 - 避免给磨砂容器设
background-color，改用background: rgba(255,255,255,0.04)这类极低透明度色值打底，让backdrop-filter有操作空间 - Safari 对
backdrop-filter的深色兼容性最好，Chrome 需开启chrome://flags/#backdrop-filter（v125+ 已默认启用），Firefox 仍不支持
linear-gradient + noise 混合做磨砂，为什么边缘生硬、不自然？
因为渐变和噪声是两个独立图层，CSS 默认用 background-composite（不存在）方式叠加，实际是简单覆盖。想模拟真实磨砂的「局部透、局部厚」，得控制噪声的明暗分布。
- 把噪声作为
mask-image，用radial-gradient控制遮罩强度：mask-image: radial-gradient(circle at 30% 30%, black 0%, transparent 70%) - 噪声纹理本身用
filter: contrast(1.3) brightness(0.9)微调（需包裹在<div> 内并设 <code>isolation: isolate） - 别用
background: linear-gradient(...) , url(noise.svg)这种双层写法——第二层会完全盖住第一层的过渡，应改为用background: rgb(12 12 16 / 0.65), url(...)并设background-blend-mode: soft-light - 给磨砂容器加
will-change: transform（仅在需要时，不用全局加） - 禁用
backdrop-filter在滚动中的动画：用@media (prefers-reduced-motion: reduce)降级为纯半透明色 - 噪声图改用 CSS
paint-api动态生成（需注册worklet），但兼容性差；更现实的做法是用image-set()提供 2x 噪声图，避免 DPR 变化时重采样
移动端 iOS Safari 中磨砂背景闪烁或卡顿
本质是 backdrop-filter 触发了全图重绘，尤其配合滚动时。iOS 对滤镜区域的硬件加速很敏感，稍不注意就掉帧。
立即学习“前端免费学习笔记（深入）”；
blur() 就完事，关键在「透多少、在哪透、透得是否稳定」——噪声纹理的明暗分布、backdrop-filter 的上下文依赖、以及移动端对合成层的苛刻要求，三者少一个，效果就往塑料膜上偏。
