去除灰度无滤镜 CSS

在一些 Web 应用程序中，往往需要对图片进行一些基本的处理，例如把图片转化为黑白灰度图。在 CSS3 中，提供了 grayscale 特性用于实现这个目的，但是在一些场景下却需要去除这个灰度滤镜。

本文将介绍如何去除灰度无滤镜 CSS，并提供一些实用代码示例。

去除灰度无滤镜

如果需要去除灰度无滤镜 CSS，我们可以使用 filter 属性。filter 属性用于指定图形效果（例如模糊、饱和度等）。

要去除灰度滤镜，我们可以这样做：

img {
  filter: grayscale(0%);
}

这条 CSS 规则将 grayscale 的值设为了 0，也就是完全不灰度化，因此相当于去除了灰度滤镜。

实用示例

禁用灰度滤镜

img {
  filter: grayscale(0%);
}

此代码片段将禁用所有图像的灰度滤镜。

只对某一张图片禁用灰度滤镜

img.no-grayscale {
  filter: grayscale(0%);
}

此代码片段将只禁用 no-grayscale 类所指定的图像的灰度滤镜。

保留原有灰度程度

img {
  filter: grayscale(calc(100% - 100vw + 100%));
}

使用 calc() 函数可以实现动态计算灰度程度的值，从而使图片的灰度程度保持不变。

结语

本文介绍了如何去除灰度无滤镜 CSS，以及提供了三个实用示例。当你的项目需要去除灰度滤镜时，以上方法应该能够解决你的问题。