CSS grayscale()函数可以将元素的图像转换为灰度图像。它可以接受一个参数，表示转换的程度。参数的值范围是0到1，其中0表示原始图像，1表示完全灰度。
以下是一个示例，演示如何使用grayscale()函数将图像转换为灰度：
云服务器
物理服务器
虚拟主机
跨境电商服务器<!DOCTYPE html>
<html>
<head>
<style>
/* 将图像转换为50%的灰度 */
img {
filter: grayscale(0.5);
}
</style>
</head>
<body>
<img src="example.jpg" alt="Example Image">
</body>
</html>
在上面的示例中，我们使用了grayscale(0.5)来将图像转换为50%的灰度。这意味着图像会变得部分灰色，但仍然保留一些颜色。
你也可以使用grayscale()函数将元素的背景图片转换为灰度。以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 将背景图片转换为完全灰度 */
div {
width: 300px;
height: 300px;
background-image: url("example.jpg");
background-size: cover;
filter: grayscale(1);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在上面的示例中，我们使用了grayscale(1)来将背景图片转换为完全灰度。这意味着背景图片会变得完全灰色，不再显示任何颜色。
使用grayscale()函数可以给网页添加一种独特的效果，可以用于创建黑白照片效果或者为图片添加一些特殊的视觉效果。
辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
推荐阅读： css格式化网页的方式有哪些