filter: grayscale() 对 background-image 无效，仅作用于 等元素自身内容；需确保使用 html 图片、避免硬件加速干扰、正确书写单位（如 grayscale(100%) 而非 grayscale(100)），并注意浏览器差异与性能影响。
filter: grayscale() 为什么图片没变灰
常见现象是写了 filter: grayscale(1) 但图片毫无反应，大概率是图片被设置了 background-image 而不是用 <img> 标签加载——filter 对背景图无效，只作用于元素自身内容（比如 <img> 的图像流、SVG 内容或文字）。
使用场景：想让头像、商品图、图标等在悬停或禁用状态变灰，必须确保它是 HTML 图片元素，且没被 transform 或 opacity 等触发硬件加速后意外绕过滤镜（某些旧版 Safari 有此问题）。
-
grayscale()参数是 0–1 的数值或百分比，grayscale(1)和grayscale(100%)等价，完全黑白；grayscale(0)是原色 - 别写
grayscale(100)（漏了 %），这会被当无效值，降级为grayscale(0) - 如果父容器有
overflow: hidden且图片带transform，部分 Chrome 版本可能裁剪滤镜效果，加will-change: filter可缓解
hover 时加黑白滤镜但过渡不自然
直接写 transition: filter 0.3s 在多数浏览器可行，但 Safari 对 filter 过渡支持较晚（iOS 13+/macOS 10.15+ 才稳定），老版本会跳变或失效。
性能影响：filter 属于“合成层”操作，频繁变化可能触发重绘，尤其在滚动区域里对大量图片用 hover 滤镜，容易卡顿。
- 务必同时定义初始态和目标态的
filter，比如img { filter: grayscale(0); transition: filter 0.3s; } img:hover { filter: grayscale(1); }，不能只在 hover 里写 - 避免和
opacity同时过渡——两者都触发合成，但叠加可能增加 GPU 压力，优先用filter单独控制灰度 - 如需兼容 iOS 12 及更早，改用
svg filter或 JS 动态替换src（不推荐，破坏语义和缓存）
grayscale() 在不同浏览器渲染结果不一致
Chrome 和 Firefox 默认用相对线性算法，Safari（尤其旧版）曾用基于亮度的非线性转换，导致同一张图在 Safari 里显得更暗、细节丢失更多。
这不是 bug，而是 CSS 规范允许实现差异——grayscale() 只规定“去色”，没限定算法。所以设计稿里看到的灰度效果，上线后可能在 Safari 里偏重。
- 测试时务必真机检查 iOS Safari，模拟器有时不准确
- 若对灰度精度敏感（如品牌视觉规范要求），放弃
grayscale()，改用filter: url(#my-grayscale)引入 SVG 滤镜，可自定义矩阵 - 注意：CSS 中的
grayscale()不支持调整对比度或亮度，它只是移除色相和饱和度，想微调得叠加brightness()或contrast()
用 JavaScript 动态控制 grayscale 值
适合做滑块调节、主题切换或无障碍模式（如用户偏好减少色彩刺激），核心是操作 style.filter 字符串，但要注意拼接安全。
容易踩的坑是反复设置时覆盖其他 filter 效果，比如已有 blur(2px)，直接赋值 element.style.filter = 'grayscale(0.7)' 会把 blur 干掉。
- 用
getComputedStyle(element).filter读取当前值，再用正则提取/替换grayscale\([^)]*\)部分，保持其余 filter 不变 - 更稳妥的做法：维护一个 filter 配置对象，如
{ grayscale: 0.7, blur: '2px' }，每次更新后生成完整字符串grayscale(0.7) blur(2px) - 别用
+=拼接，element.style.filter += ' grayscale(0.5)'在无初始值时会变成' grayscale(0.5)'，开头空格导致解析失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
