Rotten an Image with HTML | MDN

HTML是一种标记语言，程序员可以在其中使用各种标记、属性和元素来创建网页。其中一个标记就是<img>，它可以用来插入图片。在有些情况下，我们可能需要将图片变得模糊不清，使其看起来不佳。这就需要使用图片的CSS滤镜。其中一种是灰度滤镜。

灰度滤镜

在CSS中，可以使用filter属性来应用滤镜效果。其中一个滤镜就是灰度滤镜。通过将图像中的颜色转换为相同的灰色阶，可以使图像的色彩变得暗淡、模糊。

在HTML中，可以通过CSS样式来应用灰度滤镜。下面是一个例子：

<img src="image.jpg" alt="image description" style="filter: grayscale(100%);">

在上面的例子中，grayscale(100%)将图片变成了完全灰度，即黑白图像。

其他滤镜效果

除了灰度滤镜，还有其他滤镜效果可以应用到图片上。例如，模糊滤镜可以使图像变得模糊不清。下面是一个例子：

<img src="image.jpg" alt="image description" style="filter: blur(5px);">

在上面的例子中，blur(5px)将图片模糊了5像素。

总结

通过使用CSS滤镜，我们可以轻松地将图片变得模糊、灰色或者应用其他各种效果。这为我们创建更好的用户体验提供了很好的可能性。

以上是本文对HTML中如何使用CSS滤镜来灰化图片的介绍，希望对您有所帮助。

代码片段markdown格式：

# Rotten an Image with HTML | MDN

HTML是一种标记语言，程序员可以在其中使用各种标记、属性和元素来创建网页。其中一个标记就是`<img>`，它可以用来插入图片。在有些情况下，我们可能需要将图片变得模糊不清，使其看起来不佳。这就需要使用图片的CSS滤镜。其中一种是灰度滤镜。

## 灰度滤镜

在CSS中，可以使用`filter`属性来应用滤镜效果。其中一个滤镜就是灰度滤镜。通过将图像中的颜色转换为相同的灰色阶，可以使图像的色彩变得暗淡、模糊。

在HTML中，可以通过CSS样式来应用灰度滤镜。下面是一个例子：

```html
<img src="image.jpg" alt="image description" style="filter: grayscale(100%);">

在上面的例子中，grayscale(100%)将图片变成了完全灰度，即黑白图像。

其他滤镜效果

除了灰度滤镜，还有其他滤镜效果可以应用到图片上。例如，模糊滤镜可以使图像变得模糊不清。下面是一个例子：

<img src="image.jpg" alt="image description" style="filter: blur(5px);">

在上面的例子中，blur(5px)将图片模糊了5像素。

总结

通过使用CSS滤镜，我们可以轻松地将图片变得模糊、灰色或者应用其他各种效果。这为我们创建更好的用户体验提供了很好的可能性。

以上是本文对HTML中如何使用CSS滤镜来灰化图片的介绍，希望对您有所帮助。