利用 css 的 `filter: grayscale()` 属性，可轻松实现图片默认灰度显示、鼠标悬停时还原原始多色效果，无需预设颜色值，完美适配含多种色彩的 logo（如 python 标志）。
在现代网页设计中，为保持视觉统一性，常需将品牌 Logo 默认以灰度呈现，再通过交互（如悬停）唤起其真实色彩。由于 Logo 往往包含多种颜色（如 Python 图标含蓝色主体与黄色蛇形图案），传统 color 或 background-color 单色覆盖方案完全不适用。此时，CSS 的 filter 属性提供了简洁高效的解决方案。
核心原理是使用 grayscale() 函数控制图像的灰度强度：
- grayscale(1) 表示 100% 灰度（完全去色）；
- grayscale(0) 表示 0% 灰度（原始色彩完全保留）；
- 值域为 0 到 1（或 0% 到 100%），支持平滑过渡。
以下为完整可运行示例：
.logo {
max-height: 70vh;
max-width: 70vw;
filter: grayscale(1);
transition: filter 0.3s ease; /* 添加过渡更自然 */
}
.logo:hover {
filter: grayscale(0);
}
@@##@@
✅ 关键优势：
立即学习“前端免费学习笔记（深入）”；
- 无需修改图片资源，兼容任意 PNG/SVG/JPEG 多色图像；
- 原生 CSS 实现，性能优异，无 JavaScript 依赖；
- 支持链式滤镜（如叠加 brightness() 或 contrast() 进一步优化视觉层次）。
⚠️ 注意事项：
- filter 在 IE 中完全不支持，若需兼容旧版浏览器，应配合 @supports 特性检测或提供降级方案；
- SVG 内联图标若使用
- 移动端触屏设备无 :hover 状态，建议结合 :focus 或媒体查询增强可访问性（例如添加 outline 或焦点高亮）。
综上，filter: grayscale() 是实现「灰度→全彩」悬停效果最直接、语义清晰且广泛支持的现代 CSS 方案，特别适合品牌展示区、合作伙伴墙等注重设计一致性与交互反馈的场景。