在CSS中编辑图像：过滤器

考虑一种情况，您的网站上必须具有高对比度，模糊或明亮的特定图像版本。 在使用CSS过滤器之前，您唯一的选择是上传这些图像的不同版本或使用JavaScript处理图像。

除非您要操纵原始图像中的像素，否则CSS过滤器将提供一种简单的方法。 让我们从本教程开始，简要讨论所有可用的过滤器。

模糊滤镜

此滤镜将对图像应用高斯模糊。 您将必须提供一个长度值，该值将确定需要混合多少像素。 这意味着更大的值将提供更模糊的图像。 请记住，您不能使用百分比来确定模糊半径。 如果未指定参数，则使用值0。 使用此过滤器的正确语法是：

filter: blur( <length> )

blur()过滤器不接受负值。

亮度滤镜

该滤镜会将线性倍增器应用于您的图像，从而使它们比原始图像更亮或更暗。 它接受数字和百分比值。 设为0％时，您将获得全黑图像。 100％的原始图像没有任何变化。 值越高，图像越亮。 足够高的值会使图像大部分变为白色。 使用此过滤器的正确语法是：

filter : brightness( [ <number> | <percentage> ] )

此过滤器也不接受任何负值。

对比滤镜

此滤镜可改变图像的对比度。 就像亮度过滤器一样，它接受数字和百分比值。 值为0％将产生完全灰色的图像。 将该值设置为100％无效。 高于100％的值将产生高对比度的图像。 不允许您在contrast()过滤器中使用负值。 使用此过滤器的正确语法是：

filter : contrast( [ <number> | <percentage> ] )