如何使用CSS过滤器(模糊,灰度,棕褐色等)来操纵图像和元素?
CSS过滤器是一项强大的功能,可让开发人员直接将各种效果直接应用于包括图像的元素,而无需图像编辑软件。要使用CSS过滤器,请将filter
属性应用于元素,然后将过滤器功能应用于您希望使用的过滤功能。您可以使用一些最常见的过滤器:
-
Blur :此滤镜将高斯模糊应用于元素。您可以用像素中的值控制模糊量。
<code class="css">img { filter: blur(5px); }</code>
登录后复制
-
灰度:此过滤器将元素转换为灰度。 100%的值导致完全灰度图像。
<code class="css">img { filter: grayscale(100%); }</code>
登录后复制
-
棕褐色:此滤镜使该元素具有棕褐色的音调。 100%的值导致完全棕褐色的图像。
<code class="css">img { filter: sepia(100%); }</code>
登录后复制
您可以将这些过滤器应用于任何HTML元素,例如<img alt="如何使用CSS过滤器(模糊,灰度,棕褐色等)来操纵图像和元素?" >
, <div>或<code><video></video>
,通过使用CSS选择器定位并使用filter
属性来将它们应用于<img alt="如何使用CSS过滤器(模糊,灰度,棕褐色等)来操纵图像和元素?" >,
或