利用 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 内联图标若使用 引用外部符号，需确保 filter 正确作用于容器元素（推荐将 filter 应用于 svg> 或包裹 的父容器）；
• 移动端触屏设备无 :hover 状态，建议结合 :focus 或媒体查询增强可访问性（例如添加 outline 或焦点高亮）。

综上，filter: grayscale() 是实现「灰度→全彩」悬停效果最直接、语义清晰且广泛支持的现代 CSS 方案，特别适合品牌展示区、合作伙伴墙等注重设计一致性与交互反馈的场景。