CSS Grayscale()

CSS 中的灰度滤镜可以让你将元素的颜色变成不同程度的灰色，使其呈现灰度或黑白外观。这是一种视觉效果，通过移除元素的颜色信息，将其变成不同深浅的灰色。该滤镜是 CSS filter 属性的一部分，该属性提供了多种效果来处理图像和颜色。

CSS 中的 grayscale() 函数是一个内置函数，用于将滤镜应用于图像，以设置图像的灰度。

介于 0 和 1 之间的数字表示无灰度（保留原始颜色），而 1 表示完全灰度（颜色完全移除，只留下不同深浅的灰色）。这些是灰度滤镜使用的值。0 和 1 之间的中间值代表灰度强度。

语法

灰度滤镜是使用 CSS 的 filter 属性应用的。该值是一个介于 0（无灰度）和 1（完全灰度）之间的数字。该值也可以用百分比表示，即从 0% 到 100%。

这是在 CSS 中使用灰度滤镜的一个示例

在上面的示例中，灰度滤镜应用于具有类名 grayscale-element 的元素，并将值设置为 0.5，使元素以灰度格式显示。

上面示例中的 filter 属性在 CSS 中很有用。grayscale( ) 是 filter 属性中可用的函数之一。CSS 的 filter 属性提供了图形效果，如模糊、调整亮度或修改颜色通道。

Grayscale( ) 函数演示

下面是一个简单的例子，说明如何使用 HTML 和 CSS 中的 grayscale() 滤镜为图像应用灰度效果

index.html

HTML 文件定义了一个基本的网页结构。它包括用于响应式设计的视口 meta 标签，并链接到一个外部样式表 (styles.css)。

style.css

CSS 文件为网页提供样式。

输出

说明

在此示例中

• filter: grayscale(0.5); 属性应用于 .image-container 类，该类包含图像。
• 0.5 的值表示 50% 的灰度强度，因此图像将显示为半灰度。
• Body：移除默认边距，垂直和水平居中内容，并设置浅色背景。
• .image-container：为图像定义一个容器，最大宽度为 600 像素。应用具有 0.5 强度（可调）的灰度滤镜。
• img：这使得图像具有响应性，占据其容器的全部宽度，并确保其下方没有额外的空间。

结论

CSS 灰度滤镜和 grayscale() 函数是用于将颜色转换为不同深浅的灰色并创建灰度或黑白视觉印象的有用工具。灰度滤镜的语法很简单，使用 filter: grayscale(value); 格式，其中值范围从 0 到 1，表示灰度强度。

它可用于更改网页上的颜色和图片外观，并且是更大的 CSS filter 属性的一部分。filter: grayscale(value);} 格式用于灰度滤镜的易于理解的语法。当需要去饱和或单色表示时，这种视觉修改可能很有用。

借助可编程的强度参数，开发人员可以根据自己的风格定制灰度效果。通过实现灰度滤镜，Web 开发人员可以提高其网站的视觉吸引力，并创建具有视觉吸引力的演示。