filter:grayscale()无反应主因是合成层干扰或overflow:hidden裁剪；参数非线性，需配合brightness微调；IE/Safari需前缀及@supports兜底；禁用态不可单靠灰度，须加pointer-events和语义属性。
filter:grayscale() 为什么加了没反应？
常见现象是写了 filter: grayscale(1);，但图片或元素颜色完全没变。根本原因通常是：该元素有 transform、opacity 或其他合成层触发属性，导致浏览器跳过滤镜渲染；或者父元素设置了 overflow: hidden 且子元素超出边界，裁剪掉了滤镜作用区域。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先检查是否被
overflow: hidden截断——临时改成overflow: visible看效果是否恢复 - 避免和
will-change: transform同时使用，二者在某些 Chrome 版本中存在渲染冲突 - 确保目标元素不是
display: inline（如<span></span>），filter对 inline 元素默认不生效，需加display: inline-block或block - 若用在 SVG 内嵌图上，注意部分 SVG 渲染引擎不支持 CSS filter，应改用
<fecolormatrix></fecolormatrix>滤镜
grayscale() 的参数值怎么选才不发灰发脏？
grayscale() 接收 0–1 之间的数值或百分比，但实际视觉灰度不是线性变化的。设为 0.5 并不等于“半灰”，而是把色彩通道做加权平均（按人眼敏感度：R×0.21, G×0.72, B×0.07），再填回三通道。所以纯红 #ff0000 经 grayscale(1) 后变成 #333333，而非直觉上的 #808080。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 要精确控制灰度深浅，优先用
grayscale(0.8)这类小数，别用80%（虽然等价，但小数更易统一维护） - 如果发现去色后整体偏暗，说明原图对比度高，可配合
brightness(1.1)微调，但慎用——叠加多个 filter 会增加 GPU 负担 - 对文字使用
grayscale()没意义，浏览器会忽略（文字无 RGB 通道可“灰度”），应改用color或opacity
IE 和旧版 Safari 不支持 filter 怎么兜底？
filter: grayscale() 在 IE 完全不可用，Safari ≤ 9 需加 -webkit-filter 前缀，且不支持 transition 动画。一旦用户环境不支持，元素就直接显示原色，毫无降级提示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (filter: grayscale())包裹样式，把 fallback 方案写在外部（比如用 desaturate Sass 函数预生成灰度图） - 服务端识别 UA 后，对 IE 用户返回已处理好的灰度 PNG，而不是指望前端 JS 补救
- 不要用 JS 检测
style.filter是否可赋值来判断支持——IE11 返回""，但其实根本不支持，应检测window.CSS && CSS.supports('filter', 'grayscale(1)')
用 grayscale 做禁用态（disabled state）要注意什么？
很多团队用 grayscale(1) + opacity(0.6) 表示按钮禁用，但这是错的：灰度本身不传达“不可交互”，反而让图标细节丢失，尤其对色觉障碍用户更难识别状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用态必须配合
pointer-events: none和tabindex="-1"，否则键盘用户仍能聚焦，屏幕阅读器也会误读 - 灰度只是视觉辅助，主信号应是文字提示（如加
aria-disabled="true"）和对比度变化（WCAG 要求禁用文本与背景对比度 ≥ 4.5:1） - 如果用了
grayscale(1)，记得同步调整字体颜色——否则灰色文字配灰色背景，直接看不见
