考虑一种情况,您的网站上必须具有高对比度,模糊或明亮的特定图像版本。 在使用CSS过滤器之前,您唯一的选择是上传这些图像的不同版本或使用JavaScript处理图像。
除非您要操纵原始图像中的像素,否则CSS过滤器将提供一种简单的方法。 让我们从本教程开始,简要讨论所有可用的过滤器。
模糊滤镜
此滤镜将对图像应用高斯模糊。 您将必须提供一个长度值,该值将确定需要混合多少像素。 这意味着更大的值将提供更模糊的图像。 请记住,您不能使用百分比来确定模糊半径。 如果未指定参数,则使用值0。 使用此过滤器的正确语法是:
filter: blur( <length> )
blur()
过滤器不接受负值。
亮度滤镜
该滤镜会将线性倍增器应用于您的图像,从而使它们比原始图像更亮或更暗。 它接受数字和百分比值。 设为0%时,您将获得全黑图像。 100%的原始图像没有任何变化。 值越高,图像越亮。 足够高的值会使图像大部分变为白色。 使用此过滤器的正确语法是:
filter : brightness( [ <number> | <percentage> ] )
此过滤器也不接受任何负值。
对比滤镜
此滤镜可改变图像的对比度。 就像亮度过滤器一样,它接受数字和百分比值。 值为0%将产生完全灰色的图像。 将该值设置为100%无效。 高于100%的值将产生高对比度的图像。 不允许您在contrast()
过滤器中使用负值。 使用此过滤器的正确语法是:
filter : contrast( [ <number> | <percentage> ] )
<