css 模糊滤镜_CSS滤镜效果：CSS中的模糊，灰度，亮度等等！

css 模糊滤镜

A sample of the CSS filter effect possibilities in this article!

本文中CSS滤镜效果示例！

Filters were originally part of the SVG specification. However, when their usefulness became evident, W3C started working on adding some common filter effects to CSS as well. CSS filters are pretty powerful and incredibly easy to use. You can use them to blur, brighten or saturate images among other things. They can be used alone or in combination with other filters. You need to use the following syntax to apply filters in CSS:

过滤器最初是SVG规范的一部分。 但是，当它们的用途变得明显时，W3C也开始着手向CSS添加一些常见的滤镜效果。 CSS过滤器功能强大且易于使用。 您可以使用它们来模糊，增亮或饱和图像。 它们可以单独使用，也可以与其他过滤器组合使用。 您需要使用以下语法在CSS中应用过滤器：

filter: <filter-function> [<filter-function>]* | none

Now, let’s go over all these filters briefly.

现在，让我们简要介绍所有这些过滤器。

亮度 (Brightness)

This filter controls the brightness of your images. It accepts values greater than or equal to zero as its parameter. A value of 0% will give you a completely black output. Similarly, a value of 100% will give you the original image. You can specify values greater than 100% to get even brighter images. For instance, a value of 300% will make the image 3 times as bright:

此滤镜控制图像的亮度。 它接受大于或等于零的值作为其参数。 值为0％将为您提供完全黑色的输出。 同样，值100％将为您提供原始图像。 您可以指定大于100％的值以获得更明亮的图像。 例如，值为300％将使图像变亮3倍：

img {
  filter: brightness(300%);
}

Here is a CodePen with a brightness CSS filter in action:

这是一个带有亮度CSS过滤器的CodePen：

See the Pen CSS Filter Example — Brightness by SitePoint (@SitePoint) on CodePen.

请参见Pen CSS筛选器示例— CodePen上的SitePoint ( @SitePoint ) 亮度 。

对比 (Contrast)

This filter controls the contrast of your images. Just like the brightness filter, it also accepts values greater than or equal to zero. This filter controls the difference between dark and light parts of the image in CSS. Therefore, a value of 0% results in a gray image. Setting the contrast to 100% gives you the original image and any value beyond that will further increase the image contrast:

该滤镜控制图像的对比度。 就像亮度滤镜一样，它也接受大于或等于零的值。 此滤镜控制CSS中图像的暗部和亮部之间的差异。 因此，值为0％会产生灰色图像。 将对比度设置为100％可为您提供原始图像，超出此范围的任何值将进一步提高图像对比度：

img {
  filter: contrast(0%);
}

Here is a CodePen with a contrast CSS filter in action:

这是一个带有对比CSS过滤器的CodePen：

See the Pen CSS Filter Example — Contrast by SitePoint (@SitePoint) on CodePen.

请参见Pen CSS筛选器示例— CodePen上的SitePoint ( @SitePoint ) 与之对比 。

灰阶 (Grayscale)

As evident from the name, this filter can help you make your images grayscale. This filter gradually converts all the colors in our images to some shade of gray. A value of 0% will have no effect on our images and a value of 10