grayscale()数值填0为原色、1或100%为纯灰度，中间值线性过渡；常见错误是漏写%导致无效或叠加其他滤镜致变黑；需注意浏览器兼容性、hover失效及局部灰度不可行等问题。
grayscale() 滤镜的数值怎么填才不是全灰或没反应
值为 0 是原色，1 或 100% 是纯灰度，中间值线性过渡。填 0.5 和 50% 效果一样，但别写成 50（缺单位会被忽略）。
常见错误现象：图片完全没变化 → 很可能是写了 grayscale(50) 而不是 grayscale(50%)；图片变黑 → 可能叠加了其他滤镜（比如 contrast(0)），或父容器有 opacity: 0 类似干扰。
-
grayscale(0)：不生效，等同于没写 -
grayscale(0.3)：保留约 30% 色彩信息，适合弱化但不隐藏图片内容 - 慎用小数点后太多位（如
0.3333），CSS 解析无收益，还增加维护成本
img 标签加 grayscale 后鼠标悬停变色失效怎么办
因为 filter 会触发浏览器的硬件加速层，导致 :hover 下的 background-color 或 border-color 等属性在某些旧版 Chrome / Safari 中渲染异常，尤其当图片是 inline 元素时。
使用场景：做卡片列表，希望 hover 时图片变灰 + 底部文字高亮。此时不能只靠 img:hover { filter: grayscale(1); }。
立即学习“前端免费学习笔记（深入）”；
- 给
img外层套一层<div>，hover 控制父容器，再用后代选择器改 <code>img的filter - 避免对
img直接设transition: filter 0.3s，部分安卓 WebView 会卡顿；换成will-change: filter可缓解 - 如果必须用伪元素遮罩（比如加 hover 文字层），记得给伪元素设
pointer-events: none，否则会拦截鼠标事件，导致 hover 失效 - 用
filter: brightness(1.1) grayscale(0.8)补偿（数值按实际图微调） - 不要叠加多个
grayscale()，无效；CSS 不支持重复声明同一函数 - 如果项目已用 PostCSS，可考虑插件
postcss-filter-grayscale提前转成 SVG 滤镜，兼容性更好但体积略增 - 真要局部控制，优先导出两张图：一张原图，一张用 PS / Figma 处理好人脸灰度的版本，用
<picture></picture>+<source></source>切换 - 或者用 Canvas 动态绘制 —— 读取像素、判断 RGB 区间、重写灰度值，但 JS 成本高，仅适合静态头像类场景
- SVG
<filter></filter>可定义区域，但需内联 SVG 且维护复杂，上线前务必测 iOS 微信内置浏览器是否支持
grayscale 在 Firefox 和 Safari 下颜色偏暗怎么调
不是 bug，是不同引擎对 filter 的色彩空间处理差异：Chrome 默认用 sRGB，Safari/Firefox 更倾向线性光（linear-light）合成，导致灰度后明度下降更明显。
参数差异：grayscale() 本身没提供 gamma 或 luma 调节入口，所以得绕路。
想让某张图局部变灰（比如只灰化人物脸部）还能用 grayscale 吗
不能。CSS grayscale() 是作用于整个渲染盒（rendering box）的全局滤镜，无法指定区域。
性能影响明显：强行用 clip-path + 多层 filter 模拟局部灰度，会导致重绘开销陡增，滚动时掉帧。
灰度这件事，看着简单，但跨浏览器一致性、交互响应、局部控制这三块最容易在提测前一天露馅。尤其是设计师给的“轻微灰化”需求，往往卡在 0.2 和 0.25 之间反复调——这时候别硬怼 filter，先确认是不是该换图源或改交互逻辑。
