grayscale()函数用于将元素转换为灰度图像，通过filter: grayscale(amount)实现，amount支持百分比或0-1数值，可单独使用或与其他滤镜组合，适用于图片、文本、视频、SVG等几乎所有HTML元素，常用于营造复古氛围或视觉层次，结合:hover和transition可实现平滑交互效果，移动端需注意性能与可读性，低版本浏览器可加-webkit前缀兼容。
grayscale()函数在CSS中是一个非常直观且强大的图像滤镜，它的核心作用就是将一个元素，通常是图片，转换成灰度显示。你可以用它来移除色彩信息，让画面呈现出经典的黑白效果，或者只是轻微地减弱色彩饱和度，营造出一种复古或沉静的氛围。
解决方案
要将元素转换为灰度图像，
grayscale()函数是CSS
filter属性中的一个值。它的基本语法很简单：
filter: grayscale(amount);。这个
amount参数决定了灰度转换的程度。
amount可以接受两种类型的值：
-
百分比值 (percentage): 从
0%
到100%
。0%
：表示没有灰度转换，元素保持原始色彩。100%
：表示完全转换为灰度，元素将显示为纯粹的黑白。- 介于
0%
和100%
之间的值：例如50%
，会将元素转换为一半灰度，保留部分原始色彩，这在很多时候能创造出一种独特、不那么生硬的视觉效果。我个人很喜欢用这种中间值，它能让设计更有层次感。
-
数值 (number): 从
0
到1
。0
：等同于0%
。1
：等同于100%
。- 介于
0
和1
之间的值：例如0.75
，表示75%的灰度转换。
实际应用时，你只需要将这个属性和值应用到你想要影响的CSS选择器上。比如，想让所有图片在默认状态下都呈现半灰度，可以这样写：
立即学习“前端免费学习笔记（深入）”；
img {
filter: grayscale(50%); /* 或者 filter: grayscale(0.5); */
}如果想实现鼠标悬停时图片从彩色变为灰度，那就可以结合
:hover伪类：
img {
filter: grayscale(0%); /* 默认彩色 */
transition: filter 0.3s ease-in-out; /* 添加过渡效果，让变化更平滑 */
}
img:hover {
filter: grayscale(100%); /* 悬停时完全灰度 */
}这个过渡效果是关键，没有它，图片会瞬间变色，显得有点生硬。加了过渡，整个用户体验会好很多，也更符合我们对“自然”的视觉期待。
grayscale()函数与其他CSS滤镜如何组合使用？
grayscale()函数作为
filter属性的一个值，它的强大之处在于可以与其他CSS滤镜函数进行组合。是的，你没听错，你可以把好几个滤镜“堆叠”起来，创造出非常复杂的视觉效果。这就像在Photoshop里给图层添加多个调整层一样，每个滤镜都对上一个滤镜的结果进行处理。
组合滤镜时，只需在
filter属性中用空格分隔它们。例如，你想让一张图片既变成灰度，又有点模糊，还可以调整一下亮度，你可以这样写：
.my-image {
filter: grayscale(80%) blur(2px) brightness(1.2);
}这里，图片首先被转换成80%的灰度，然后这个灰度图像再被模糊2像素，最后模糊后的灰度图像的亮度再增加20%。注意，这些滤镜的顺序是重要的。改变它们的顺序可能会产生不同的最终视觉效果。比如，先模糊再灰度，和先灰度再模糊，结果可能就不一样。这其实挺有意思的，你可以多尝试几次，看看哪种组合和顺序最符合你的设计意图。
这种组合能力让
grayscale()不仅仅是一个简单的灰度工具，它成了构建复杂视觉风格的一个基本模块。比如，你可以用
grayscale()结合
contrast()和
sepia()来模拟老照片的效果，或者结合
drop-shadow()给灰度图片添加一个微妙的阴影，让它在页面上“浮”起来。
移动端设备上使用grayscale()函数有什么需要注意的地方吗？
在移动端设备上使用
grayscale()函数，大部分情况下体验是相当不错的，现代浏览器对
filter属性的支持度已经非常高了。但我们作为开发者，总得考虑一些细微之处，对吧？
性能问题。虽然
grayscale()本身是一个相对轻量级的操作，但如果你的页面上有很多大尺寸图片都应用了复杂的
filter组合，并且在滚动或动画过程中频繁改变这些滤镜，那么在一些配置较低的移动设备上，可能会出现轻微的卡顿或掉帧。这是因为浏览器需要实时计算并渲染这些像素变化。我的建议是，对于非关键的视觉效果，可以考虑在CSS中添加
will-change: filter;来提示浏览器优化，但不要滥用，它也有自己的开销。更实际的做法是，尽量减少对大型图片或大量元素的复杂滤镜操作，或者在动画时限制滤镜变化的频率。
用户体验。在移动端，用户可能更注重内容的快速加载和清晰呈现。过度使用灰度滤镜，尤其是在导航元素或重要信息上，可能会降低可读性或辨识度。比如，一个原本用颜色区分的按钮，如果完全变成灰度，用户可能就很难一眼识别其状态。所以，在移动端设计时，要权衡美观和实用性，确保灰度效果不会干扰核心功能或信息传达。
兼容性回顾。尽管主流移动浏览器（如Chrome for Android, Safari for iOS）对
filter属性支持良好，但在一些老旧的Android WebView或者特定浏览器版本中，可能仍需要考虑
webkit前缀：
-webkit-filter: grayscale(100%);。虽然现在已经很少用到，但如果你需要支持非常广泛的用户群体，查阅Can I Use是永远不会错的习惯。
除了图片，grayscale()函数还能用在哪些HTML元素上？
这是一个非常好的问题，因为
grayscale()的强大之处远不止于图片。它作为CSS
filter属性的一部分，可以应用到几乎任何HTML元素上。是的，你没听错，不仅仅是
<img>标签，
<div>、
<span>、
<p>，甚至整个页面的
<body>或根元素
<html>都可以应用
grayscale()滤镜。
当
grayscale()应用到一个容器元素时，比如一个
<div>，那么这个
div及其所有子元素（包括文字、背景、图片、SVG等）都会受到滤镜的影响。这意味着你可以非常灵活地控制页面局部或整体的视觉风格。
举几个例子：
-
整个区域变灰： 假设你有一个新闻卡片区域，当它被标记为“已读”时，你想让整个卡片都变得黯淡。
<div class="news-card read"> <h2>新闻标题</h2> <p>新闻摘要...</p> <img src="news.jpg" alt="新闻图片"> </div>
.news-card.read { filter: grayscale(70%); /* 整个卡片内容都变灰 */ }这样一来，卡片里的文字、图片、甚至背景色（如果不是纯色的话）都会呈现出70%的灰度效果，一眼就能看出它已不再是“新”内容。
-
视频元素： 你也可以将
grayscale()
应用到<video>
元素上，让视频内容以黑白效果播放。这对于营造特定氛围，或者在某些艺术项目中非常有用。video { filter: grayscale(100%); } -
SVG元素： SVG作为矢量图形，同样可以被
grayscale()
滤镜影响，这对于图标或者复杂的矢量图来说，提供了另一种视觉处理的可能性。
不过，需要注意的是，当滤镜应用到文本上时，文字的颜色也会受影响，可能导致可读性下降。所以在使用时，要特别注意对比度和用户体验。我发现有时候给文字加一点点
grayscale(10% - 20%)，能让它看起来更柔和，但完全灰度可能会让文字变得模糊不清，这在实际项目中是需要避免的。总之，
grayscale()的适用范围非常广，只要你敢于尝试，总能找到一些意想不到的创意用法。
