如何使用CSS过滤器（模糊，灰度，棕褐色等）来操纵图像和元素？

如何使用CSS过滤器（模糊，灰度，棕褐色等）来操纵图像和元素？

CSS过滤器是一项强大的功能，可让开发人员直接将各种效果直接应用于包括图像的元素，而无需图像编辑软件。要使用CSS过滤器，请将filter属性应用于元素，然后将过滤器功能应用于您希望使用的过滤功能。您可以使用一些最常见的过滤器：

1. Blur ：此滤镜将高斯模糊应用于元素。您可以用像素中的值控制模糊量。

    <code class="css">img { filter: blur(5px); }</code>

2. 灰度：此过滤器将元素转换为灰度。 100％的值导致完全灰度图像。

    <code class="css">img { filter: grayscale(100%); }</code>

3. 棕褐色：此滤镜使该元素具有棕褐色的音调。 100％的值导致完全棕褐色的图像。

    <code class="css">img { filter: sepia(100%); }</code>

您可以将这些过滤器应用于任何HTML元素，例如<img alt="如何使用CSS过滤器（模糊，灰度，棕褐色等）来操纵图像和元素？" > ， <div>或<code><video></video> ，通过使用CSS选择器定位并使用filter属性来将它们应用于<img alt="如何使用CSS过滤器（模糊，灰度，棕褐色等）来操纵图像和元素？" >，

或