grayscale()将元素转为灰度图像，参数为百分比或0-1数值，100%完全黑白，0%保持原色，常用于图片、背景、SVG等视觉效果控制。
在CSS中，filter: grayscale() 用于将元素的颜色转换为灰度图像。它不会直接“调整”某种特定颜色，而是将整个元素的色彩饱和度降低到零，呈现出黑白效果。
基本语法
grayscale(值) 接受一个参数，可以是百分比或0到1之间的数值：
- grayscale(100%) 或 grayscale(1)：完全灰度，无任何颜色
- grayscale(0%) 或 grayscale(0)：保持原色，无变化
- grayscale(50%) 或 grayscale(0.5)：部分灰度，保留一些色彩信息
常见用法示例
将图片变为黑白：
img {filter: grayscale(100%);
}
鼠标悬停时恢复原色：
立即学习“前端免费学习笔记（深入）”；
盛世企业网站管理系统1.1.2
下载
免费 盛世企业网站管理系统(SnSee)系统完全免费使用，无任何功能模块使用限制，在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源 系统Web代码完全开源，在您使用过程中可以根据自已实际情况加以调整或修改，完全可以满足您的需求。强大且灵活 独创的多语言功能，可以直接在后台自由设定语言版本，其语言版本不限数量，可根据自已需要进行任意设置；系统各模块可在后台自由设置及开启；强大且适用的后台管理支
filter: grayscale(100%);
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(0);
}
可应用的元素类型
filter 属性适用于大多数块级和内联元素，尤其是：
- 图片（img）
- 背景图（div 等容器）
- SVG 图标
- 视频（video 标签）
例如给带背景图的 div 添加灰度效果：
.card {background-image: url('photo.jpg');
filter: grayscale(70%);
}
注意事项
使用 filter: grayscale() 时需注意以下几点：
基本上就这些。grayscale() 是一种简单高效的视觉控制手段，常用于状态切换、视觉统一或交互反馈。
