filter: grayscale(100%) 不生效常见原因：被其他 CSS 覆盖（如 filter:none）、浏览器兼容性问题（如旧版 Safari）、作用对象错误（对 background-image 或伪元素无效，仅对 img 等渲染后元素有效）、图片未加载完成。
filter: grayscale(100%) 不生效的常见原因
直接写 filter: grayscale(100%) 却没变灰？大概率是元素被其他 CSS 覆盖、或浏览器不支持、或图像本身被 background-image 加载而没挂载到 DOM 树上。它只作用于渲染后的元素，对 <img> 标签本身有效，但对伪元素或背景图无效。
- 检查是否被
filter: none或更高级别的样式覆盖（用浏览器开发者工具看“Computed”面板） -
<img>必须已加载完成；动态插入的图片要等load事件后加 class 才可靠 - Safari 旧版本（filter 在
<img>上的支持不稳定，可加-webkit-filter: grayscale(100%)兜底 - 如果图像是通过
background-image设置的，得改用background-blend-mode或 SVG 滤镜，filter对 background 无效
如何让灰度效果响应鼠标悬停或状态切换
纯 CSS 切换最常用，但要注意过渡行为和性能。直接对 filter 做 transition 是安全的，浏览器会硬件加速，但别和 transform 或 opacity 混合过渡——容易触发重排。
- 写法示例：
img {filter: grayscale(100%); transition: filter 0.3s ease; }<br>img:hover {filter: grayscale(0%); } - 避免写成
transition: all 0.3s，否则任何属性变化都会触发过渡，干扰调试 - 在 React/Vue 等框架中，用 class 切换比内联 style 更可控；避免直接操作
style.filter，易丢失原有 filter 链（比如已有blur()）
多个 filter 效果叠加时 grayscale 的位置很关键
filter 是从左到右依次执行的函数链，grayscale() 放前面还是后面，结果可能完全不同。尤其和 contrast()、brightness() 搭配时，顺序错会导致颜色失真或灰度“失效”。
- 正确顺序（先调色再灰度）：
filter: contrast(1.2) brightness(1.1) grayscale(100%) - 错误顺序（先灰度再调亮）：
filter: grayscale(100%) brightness(1.5)—— 亮度提升的是灰阶值，不是原始色相，看起来发灰又刺眼 - 若需保留部分色彩（如红标），不能靠调整 grayscale 参数，得用 SVG
<filter>自定义通道，CSS 的 grayscale 是全通道平均，不可逆
服务端图像灰度 vs 前端 filter：什么情况该放弃 CSS
前端用 filter: grayscale(100%) 简单快捷，但遇到 SEO、打印、截图、Canvas 导出或低性能设备时，就容易露馅——这些场景通常不执行 CSS filter。
立即学习 “ 前端免费学习笔记（深入）”；
- SEO 友好性：搜索引擎不解析 filter 效果，alt 文本仍是原图描述，但视觉无灰度，语义断裂
- 打印样式表里默认禁用 filter，需额外写
@media print {img { filter: none;} }并提供灰度版资源 - Canvas
drawImage()绘制的是原始像素，不会应用 CSS filter；要导出灰度图，得用ctx.getImageData()手动转灰阶 - 低端安卓 WebView 或 Electron 旧版 Chromium 可能跳帧或闪烁，此时预生成灰度图（如
image.png?grayscale）更稳
灰度这件事，表面是一行 CSS，背后连着渲染管线、设备能力、内容生命周期——调对了参数只是开始，得想清楚它在哪一刻必须“真实存在”。
