CSS filter 无法随系统亮度自动变化，因无标准媒体查询支持亮度感知，prefers-color-scheme 仅区分深浅主题；真正可用方案为手动调节或实验性 dynamic-range（不可靠）。
CSS filter 无法随系统亮度自动变化？别硬套 prefers-color-scheme
系统亮度（非深色模式）本身没有标准 CSS 媒体查询支持，prefers-color-scheme 只管「深/浅色主题」，不管屏幕是室内50nit还是户外800nit。强行用它模拟亮度响应，结果往往是白天发灰、夜晚刺眼。
- 真正可用的亮度感知手段只有：用户手动滑动调节（如通过自定义
input[type="range"]控制filter值）、或依赖 JavaScript 读取window.matchMedia('(prefers-reduced-data: reduce)')这类间接信号（但和亮度无关） - 部分安卓 WebView 和 Safari 技术预览版支持
dynamic-range媒体功能，但截至2024年仍属实验性，@media (dynamic-range: high)无法可靠用于亮度分级 - 如果项目必须适配高亮环境（比如车载屏、户外POS机），优先在硬件层做背光补偿，CSS滤镜只作辅助微调
用 filter: brightness() 做响应式对比度调整时，为什么越调越糊？
brightness() 本身不模糊，但叠加contrast()或saturation()后，浏览器光栅化过程容易触发亚像素渲染降级，尤其在 macOS 的 Retina 屏上明显。更隐蔽的问题是：当brightness(0)或brightness(100)这类极端值被 CSS 动画过渡时，GPU 加速可能失效，回退到 CPU 渲染，造成卡顿和色彩断层。
- 避免链式写法：
filter: brightness(1.2) contrast(1.1) saturate(0.9)→ 改用单次计算后的filter: url(#myFilter)（配合 SVG 滤镜定义）提升稳定性 - 动画场景下，优先用
will-change: filter提前提示合成层，但注意内存开销；移动端慎用，iOS Safari 对will-change处理不一致 - 测试时用真机+不同亮度档位截图比对，Chrome DevTools 的「Rendering」面板勾选「Paint flashing」可定位意外重绘区域
图片 <img alt="CSS响应式图片滤镜调整_针对不同屏幕亮度的视觉优化" > 和背景图 background-image 应用 filter 的行为差异
两者都支持filter，但触发条件和继承逻辑完全不同：<img alt="CSS响应式图片滤镜调整_针对不同屏幕亮度的视觉优化" > 是独立渲染对象，filter 直接作用于其像素；而background-image 的filter 实际作用于整个元素盒模型（包括 padding/border），且会被父级filter双重叠加。
- 想单独调一张图的亮度？用
<img alt="CSS响应式图片滤镜调整_针对不同屏幕亮度的视觉优化" >+filter，别塞进div里再设background-image - 需要保持背景图尺寸语义（如
background-size: cover）又想滤镜生效？把filter写在容器上，并确保该容器overflow: hidden，否则滤镜区域可能溢出 - SVG 背景图（
url("icon.svg")）应用filter时，若 SVG 内含<filter></filter>定义，会与 CSSfilter发生嵌套，导致不可预测的 gamma 偏移
兼容性陷阱：Safari 对 filter 的 drop-shadow() 和 blur() 处理异常
Safari（尤其是 iOS 16.4 之前版本）对drop-shadow() 的偏移量解析有偏差，且blur() 在transform: scale() 元素上会错误放大模糊半径。这不是 bug，而是 WebKit 对滤镜坐标系的实现差异。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：用两层元素，外层
filter: drop-shadow()，内层transform: scale(1)重置坐标系 - 若必须用
blur()且需缩放，改用 SVG<fegaussianblur></fegaussianblur>定义滤镜并引用，绕过 CSS 解析路径 - 检测是否为 Safari：
const isSafari = /Safari\/[0-9.]+/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)，但注意 UA 可伪造，生产环境建议 Feature Detection（如检查CSS.supports('filter', 'blur(1px)')）
filter，而是判断这张图在用户锁屏前最后一秒、在地铁隧道忽明忽暗的光线下，到底该亮一点，还是该压一点暗部细节——这没法靠 CSS 自动推导。 
