最简纯黑白滤镜方案是filter: grayscale(100%)，但需注意旧版Safari断层、Android WebView渲染抖动、hover过渡卡顿等问题，推荐用CSS类切换并启用GPU加速。
直接用 filter: grayscale(100%) 就行，但别只写这一行
纯黑白滤镜最简方案确实是 filter: grayscale(100%)，但它在部分旧版 Safari（
- 加
-webkit-filter: grayscale(100%)兼容老 Safari（iOS 9.3+/macOS 10.11+） - 若需支持 IE，得用 SVG 滤镜回退（
filter: url(#grayscale)），但现代项目基本可放弃 -
grayscale()接受 0–1 或 0%–100% 值，grayscale(0.5)是半灰度，不是“50% 黑白”，而是整体亮度保留一半的灰度映射
图片变黑白后发灰、对比度低？补上 contrast() 和 brightness()
原图转 grayscale(100%) 后常显得“脏”或“雾蒙蒙”，因为灰度转换本身不调整对比度。这不是 bug，是算法使然——它只做通道均值映射，不增强明暗分离。
- 典型修复组合：
filter: grayscale(100%) contrast(1.2) brightness(1.05) -
contrast()超过 1 提升层次，但 >1.4 容易出现断层；brightness()微调（1.05 ≈ +5%）可恢复因灰度损失的通透感 - 避免链式写太多：超过 3 个 filter 函数可能触发某些 Android WebView 的渲染抖动
hover 时从彩色变黑白？注意过渡失效和重绘问题
写 img { transition: filter 0.3s; } img:hover { filter: grayscale(100%); } 看似合理，但实际中常卡顿或跳变——因为 filter 属于“昂贵属性”，浏览器未必硬件加速，尤其在低端安卓机上。
- 强制开启 GPU 加速：
img { will-change: filter; }或transform: translateZ(0) - 别对父容器设
filter再 hover 子图：父级 filter 会污染子元素渲染上下文，导致 hover 时整个区域重绘 - 如果只需“开关”效果（非渐变），用
opacity+ 两层图片叠放更稳，但增加 DOM 复杂度
React/Vue 里动态控制黑白？别在 style 里拼字符串
用 JS 控制 filter 时，硬拼 style={{ filter: `grayscale(${isGray ? 1 : 0})` }} 看似方便，但容易漏单位、触发重复计算，还难调试。
立即学习“前端免费学习笔记（深入）”；
- 推荐封装成 CSS 类：
.photo--grayscale { filter: grayscale(100%) contrast(1.2); }，再用 className 切换 - 若必须内联，统一用
grayscale(1)（无单位）而非grayscale(100%)，避免 Safari 对百分比解析不一致 - 服务端渲染（SSR）场景下，JS 未加载时默认应是彩色，否则首屏闪白/黑
mix-blend-mode 或额外遮罩，但那已是另一个问题了。 
