用css filter和:hover可实现图片悬停黑白转彩色效果：默认grayscale(100%)，hover时设为grayscale(0%)并添加transition过渡；需兼容旧版浏览器时加-webkit-filter前缀，支持组合其他滤镜如brightness，适用于img、picture等元素。

用CSS的filter属性配合:hover伪类就能轻松实现图片悬停时从黑白变彩色的效果。

基础实现原理

核心思路是：默认给图片加灰度滤镜（grayscale(100%)），悬停时移除灰度（设为grayscale(0%)），再加个过渡动画让变化更自然。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

CSS代码写法

直接在样式表或<style></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></picture>或背景图（需用background-image配合其他技巧）都适用，但原生filter对背景图支持有限

HTML结构示例

无需特殊HTML结构，普通图片即可：

@@##@@

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！