用CSS filter和:hover可实现图片悬停黑白转彩色效果：默认grayscale(100%)，hover时设为grayscale(0%)并添加transition过渡；需兼容旧版浏览器时加-webkit-filter前缀，支持组合其他滤镜如brightness，适用于img、picture等元素。
用CSS的filter属性配合:hover伪类就能轻松实现图片悬停时从黑白变彩色的效果。
基础实现原理
核心思路是：默认给图片加灰度滤镜（grayscale(100%)），悬停时移除灰度（设为grayscale(0%)），再加个过渡动画让变化更自然。
CSS代码写法
直接在样式表或<style>中写：
img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(0%);
}
增强兼容性与细节优化
- 部分旧版浏览器（如Safari早期版本）需加
-webkit-filter前缀，可写成：filter: grayscale(100%); -webkit-filter: grayscale(100%); - 若想同时控制亮度、对比度等，可组合使用，例如：
filter: grayscale(100%) brightness(0.9); - 过渡时间（
0.3s）可按需调整，太短显得突兀，太长响应迟钝 - 该效果对
<img>、<picture>或背景图（需用background-image配合其他技巧）都适用，但原生filter对背景图支持有限
HTML结构示例
无需特殊HTML结构，普通图片即可：
立即学习“前端免费学习笔记（深入）”；
<img src="photo.jpg" alt="风景图" width="300">
