图片悬停时通过filter: grayscale(100%)→grayscale(0%)配合transition实现灰度到彩色平滑过渡；需仅作用于img标签或用figure隔离，避免影响文字等子元素；现代浏览器均支持。
用 CSS 的 filter 属性配合 :hover 伪类，就能让图片悬停时从灰度变回彩色，效果简洁且兼容性好（现代浏览器均支持）。
基础实现：灰度 → 彩色过渡
默认给图片加 grayscale(100%)，悬停时设为 grayscale(0%)，再加 transition 让变化平滑：
img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(0%);
}
增强体验：避免文字/图层被误灰度
如果图片是背景图或包裹了文字，直接对父容器设灰度会影响子元素。推荐只作用于 <img> 标签本身，或用独立容器隔离：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
<figure></figure>包裹图片和说明文字，仅对figure img设置 filter - 避免对整个卡片（card）设灰度，否则标题、按钮也会变灰
- 若需背景图灰度效果，改用伪元素 + background-image 模拟，再单独控制其 filter
兼容性与备用方案
旧版 Safari（filter，可加前缀或降级处理：
- Safari 早于 9.1 需加
-webkit-filter - IE 完全不支持，建议用 JavaScript 检测后添加 class 控制（如
no-filter下隐藏 hover 效果） - 移动端注意：部分安卓 WebView 对 transition 性能敏感，可加
will-change: filter提升渲染效率
进阶微调：更自然的视觉反馈
单纯灰度切换略显生硬，可叠加其他属性提升质感：
- 悬停时轻微放大：
transform: scale(1.02)，配合 filter 同时过渡 - 加一点亮度/对比度调节，让还原后的图片更“鲜活”：
filter: grayscale(0%) brightness(1.05) contrast(1.05) - 鼠标移入移出都保持过渡，避免“突兀恢复”：
transition: filter 0.3s, transform 0.3s
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
