CSS | 灰度（）函数

在CSS中，我们可以使用灰度函数将任何颜色转换为相应的灰度颜色。灰度函数可以用于改变图像的颜色，使其更符合设计需求。它可以通过将图像的RGB值平均化来实现，从而将其转换为灰度。

语法

灰度（percentage）

参数

• percentage：表示转换后的灰度程度。其值范围从0%（完全饱和的颜色）到100％（完全灰色）。

使用示例

将一个元素的背景色转换为灰度色调可以使用以下代码：

.element {
  background-color: gray;
  filter: grayscale(100%);
}

在上面的示例中，元素的背景色设置为灰色，grayscale（100％）将其转换为完全灰度。

其它使用示例

以下是将图像变为灰度以及部分灰度的示例：

/* 将图像转换为灰度 */
img {
  filter: grayscale(100%);
}

/* 转换为50%灰度 */
img {
  filter: grayscale(50%);
}

浏览器支持

灰度函数已被大多数现代浏览器所支持，如下所示：

• Chrome
• Safari
• Firefox
• IE
• Edge

结论

使用CSS的灰度函数可以轻松地将任何元素或图像转换为灰度色调，从而使其更加清晰，突出，更好地符合设计要求。