CSS灰度滤镜使用方法详解

从现在开始，努力学习吧！本文《CSS中使用filter: grayscale调整颜色方法》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

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%);
}

鼠标悬停时恢复原色：

img {
  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() 时需注意以下几点：

• filter 会影响整个元素及其子元素的视觉呈现
• 若只想对背景图做灰度处理，可考虑用伪元素 + 背景叠加方式避免影响文字
• 兼容性良好，现代浏览器都支持，但旧版IE不支持

基本上就这些。grayscale() 是一种简单高效的视觉控制手段，常用于状态切换、视觉统一或交互反馈。

本篇关于《CSS灰度滤镜使用方法详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！