深入解析：CSS滤镜效果的使用与技巧

更新:11-12 名人轶事我要投稿纠错投诉

在此处插入图像描述

2.2brightness

对图像应用线性乘法，使其显得更亮或更暗。如果值为0%，图像将是全黑的。如果值为100%，则图像不会发生变化。其他值对应线性乘数效应。 100%以上的值就可以了，图像会比以前更亮。如果未设置值，则默认为1

在此插入图像描述

2.3contrast

调整图像的对比度。如果值为0%，图像将是全黑的。该值为100%，图像不变。值可以超过100%，这意味着将使用较低的比较。如果未设置值，则默认为1。

在此处插入图像描述

2.4grayscale

在此处插入图像描述

2.5hue-rotate

对图像应用色调旋转。 “角度”值设置调整图像的色环角度。如果值为0deg，则图像不会发生变化。如果未设置该值，则默认值为0deg。虽然这个值没有最大值，但是超过360deg的值就相当于又绕了一圈。

在此处插入图像描述

2.6invert

反转输入图像。该值定义了转换的规模。 100%的值就是完全反转。值为0% 表示图像没有变化。 0% 到100% 之间的值是效果的线性乘数。如果未设置该值，则该值默认为0。

此处插入图像描述

2.7opacity：

转换图像的透明度。该值定义了转换的规模。值0% 表示完全透明，值100% 表示图像没有变化。 0%到100%之间的值是效果的线性乘数，相当于乘以图像样本的数量。如果不设置该值，则该值默认为1。该功能与现有的opacity属性非常相似，只不过通过过滤器，一些浏览器提供硬件加速来提高性能。

此处插入图像描述

2.8saturate：

转换图像饱和度。该值定义了转换的规模。值为0% 表示图像完全去饱和，值为100% 表示图像没有变化。其他值是效果的线性乘数。允许高于100%的值，饱和度更高。如果未设置该值，则该值默认为1。

在此插入图像描述

2.9sepia：

将图像转换为棕褐色。该值定义了转换的规模。 100% 的值完全是棕褐色，0% 的值使图像保持不变。 0% 到100% 之间的值是效果的线性乘数。如果不设置，则该值默认为0；

在此处插入图像描述

2.10drop-shadow：

设置图像的阴影效果。阴影在图像下方合成，并且可以是模糊的、可以用特定颜色绘制的遮罩的偏移版本。

在此处插入图像描述

3.完整代码：

文档注意：Internet Explorer 不支持过滤器属性。

blur：设置图像高斯模糊。 “半径”值设置高斯函数的标准差，或者说屏幕上有多少像素混合在一起，因此值越大，越模糊；

brightness：对图像应用线性乘法，使其显得更亮或更暗。如果值为0%，图像将是全黑的。如果该值为100%，则图像不会发生变化。其他值对应线性乘数效应。 100%以上的值就可以了，图像会比以前更亮。如果未设置值，则默认为1

contrast：调整图像的对比度。如果值为0%，图像将是全黑的。该值为100%，图像不变。值可以超过100%，这意味着将使用较低的比较。如果未设置值，则默认为1。

grayscale：将图像转换为灰度。该值定义了转换的规模。如果值为100%，图像将完全转换为灰度，如果值为0%，图像将保持不变。 0% 到100% 之间的值是效果的线性乘数。如果不设置，则该值默认为0；

hue-rotate：对图像应用色调旋转。 “角度”值设置调整图像的色环角度。如果值为0deg，则图像不会发生变化。如果未设置该值，则默认值为0deg。虽然这个值没有最大值，但是超过360deg的值就相当于又绕了一圈。

invert：反转输入图像。该值定义了转换的规模。 100%的值就是完全反转。值为0% 表示图像没有变化。 0% 到100% 之间的值是效果的线性乘数。如果未设置该值，则该值默认为0。

opacity：转换图像的透明度。该值定义了转换的规模。值0% 表示完全透明，值100% 表示图像没有变化。 0%到100%之间的值是效果的线性乘数，相当于乘以图像样本的数量。如果不设置该值，则该值默认为1。该功能与现有的opacity属性非常相似，只不过通过过滤器，一些浏览器提供硬件加速来提高性能。

saturate：转换图像饱和度。该值定义了转换的规模。值为0% 表示图像完全去饱和，值为100% 表示图像没有变化。其他值是效果的线性乘数。允许高于100%的值，饱和度更高。如果未设置该值，则该值默认为1。

sepia：将图像转换为棕褐色。该值定义了转换的规模。 100% 的值完全是棕褐色，0% 的值使图像保持不变。 0% 到100% 之间的值是效果的线性乘数。如果不设置，则该值默认为0；

文章分享结束，深入解析：CSS滤镜效果的使用与技巧和的答案你都知道了吗？欢迎再次光临本站哦！