多数情况是图片用了background-image而非<img>标签，因filter只作用于元素自身内容；需确保用HTML图片、避免transform触发硬件加速干扰、正确书写grayscale(100%)或grayscale(1)，并检查Safari旧版兼容性及样式覆盖。
hover 时用 filter:grayscale 实现图片黑白效果，但图片没反应？
多数情况不是写法错，而是 filter 被其他样式覆盖或浏览器兼容性没处理。Chrome/Firefox/Edge 现代版都支持 filter: grayscale()，但 Safari 旧版本（-webkit-filter 前缀，且必须作用在“可渲染元素”上——比如直接写在 <img> 上没问题，但若父容器设了 overflow: hidden 且图片超出尺寸，部分 Safari 下滤镜可能被裁剪失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终同时写两行：
filter: grayscale(100%);和-webkit-filter: grayscale(100%); - 避免把
:hover写在父容器上再用后代选择器控制<img>，优先直接作用于图片本身，减少层叠干扰 - 检查图片是否被
transform或will-change触发硬件加速，某些老 Chrome 版本下会与filter冲突，临时去掉测试
想让黑白过渡更自然，但 transition 不生效？
filter 支持 CSS 过渡，但只对数值型参数有效（如 grayscale(0%) → grayscale(100%)），不能写成 grayscale → grayscale(100%) 这种非数值形式。另外，transition 必须写在「常态」规则里，不是只写在 :hover 中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 过渡写法必须是：
transition: filter 0.3s ease;（放在 img 默认样式中） - 值必须带单位：
grayscale(0%)，不能省略%，否则会被当作无效值跳过过渡 - 如果同时要加模糊或亮度，合并写：
filter: grayscale(0%) brightness(1) blur(0px);，否则只过渡其中一项
图片黑白后文字/图层也变灰了？
这是常见误解：filter 作用于整个元素及其内容（包括子元素），如果图片是背景图（background-image），而文字是同级子元素，那文字不会受影响；但如果图片是 <img> 标签，文字盖在它上面（比如用绝对定位），文字属于图片的兄弟节点，不受影响；只有当文字是图片的子元素（比如 <figure><img><figcaption>）且你给 <figure> 加了 :hover 和 filter，才会连带变灰。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认 filter 应用的目标元素：只给
<img>加，不要误加到包裹容器上 - 若需容器 hover 控制图片，用属性选择器或类名隔离：
.card:hover img { filter: grayscale(100%); } - 背景图方案更可控：
div { background: url(x.jpg); }+div:hover { filter: grayscale(100%); }，此时仅背景图变灰，内部文字完全不受影响
移动端点击后残留黑白状态，松手不恢复？
iOS Safari 和部分安卓 WebView 在 touch 设备上，:hover 行为异常：轻点会触发 hover，但无鼠标移出事件，导致状态卡住。这不是 bug，是规范定义 —— :hover 在触摸设备上本就不保证可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用
:active做瞬时反馈（适合按钮式交互），或结合 JavaScript 监听touchstart/touchend切换 class - 更稳妥的纯 CSS 方案：用
@media (hover: hover)包裹 hover 样式，让触摸设备直接忽略它 - 示例：
@media (hover: hover) { img:hover { filter: grayscale(100%); transition: filter 0.25s; } }
filter: grayscale() 本身很简单，真正容易卡住的是边界场景：Safari 兼容写法、transition 触发条件、作用域误判、以及触摸设备的 hover 语义偏差。这些地方不提前踩一遍，上线后才调反而更耗时。 
