CSS3 filter(滤镜)

应用场景

filter属性可以应用于所有元素，在SVG中，它适用于除<defs>元素外的容器元素和所有图形元素。此属性不是继承属性，其计算值为指定值，动画类型为滤镜函数列表。

浏览器兼容性

大多数现代浏览器都支持filter属性，包括Chrome、Firefox、Safari以及它们的移动版本。在使用时，您可能需要考虑添加供应商前缀以确保跨浏览器兼容性。

通过使用filter属性，开发人员可以在不需要图像编辑软件的情况下直接在CSS中创建丰富的视觉效果，从而提高网页设计的灵活性和创造力。

动画和过渡

filter属性的值可以通过CSS动画和过渡进行插值。当动画处理时，如果起始和结束滤镜都有相同长度的函数列表，则会根据每个滤镜函数的特定规则进行插值。如果滤镜列表长度不同，较长列表中缺少的等效滤镜函数将以其初始值被添加到较短列表的尾部，然后所有滤镜函数根据其指定的规则插值。

代码示例

使用filter属性，您可以通过以下方式在CSS中应用不同的滤镜效果：

模糊（blur） /* 应用模糊效果 */

blur()函数可以给图像设置高斯模糊效果。模糊半径越大，图像越模糊。

img {
    -webkit-filter: blur(10px); /* Chrome, Safari, Opera */
    filter: blur(10px);
}

左效果图，右原图

亮度（brightness）/* 调整亮度 */

brightness()函数调整图像的亮度。值大于100%会使图像更亮，小于100%则更暗。

img {
    -webkit-filter: brightness(0.4); /* Chrome, Safari, Opera */
    filter: brightness(0.4);
}

左效果图，右原图

对比度（contrast）/* 调整对比度 */

contrast()函数调整图像的对比度。值是0%将使图像变灰；值是100%，则无影响；若值超过100%将增强对比度。

img {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}

左效果图，右原图

阴影（drop-shadow）/* 添加阴影效果 */

drop-shadow()函数将沿图像的轮廓生成阴影效果。

img {
    -webkit-filter: drop-shadow(16px 16px 20px blue); /* Chrome, Safari, Opera */
    filter: drop-shadow(16px 16px 20px blue);
}

左效果图，右原图

灰度（grayscale）/* 转换为灰度图 */

grayscale()函数将图像转换为灰度图。值为100%则完全转为灰度图像，若为初始值0%则图像无变化。值在0%到100%之间，则是该效果的线性乘数。

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

左效果图，右原图

色相旋转（hue-rotate）/* 色相旋转调整 */

hue-rotate()函数通过给图像应用色相旋转来改变其颜色。<angle>值设定图像会被调整的色环角度值。值为0deg，则图像无变化。

img {
    -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(90deg);
}

左效果图，右原图

反转（invert）/* 图像反转 */

invert()函数将反转输入图像。值为100%则图像完全反转，值为0%则图像无变化。值在0%和100%之间，则是该效果的线性乘数。

img {
    -webkit-filter: invert(75%); /* Chrome, Safari, Opera */
    filter: invert(75%);
}

左效果图，右原图

透明度（opacity）/* 调整透明度 */

opacity()函数应用透明度。值为0%则使图像完全透明，值为100%则图像无变化。

img {
    -webkit-filter: opacity(25%); /* Chrome, Safari, Opera */
    filter: opacity(25%);
}

左效果图，右原图

饱和度（saturate）/* 调整饱和度 */

saturate()函数调整图像饱和度。值为0%则是完全不饱和，值为100%则图像无变化。超过100%则增加饱和度。

img {
    -webkit-filter: saturate(30%); /* Chrome, Safari, Opera */
    filter: saturate(30%);
}

左效果图，右原图

色阶（sepia）/* 转换为深褐色 */

sepia()函数将图像转换为深褐色。值为100%则完全是深褐色的，值为0%图像无变化。

img {
    -webkit-filter: sepia(60%); /* Chrome, Safari, Opera */
    filter: sepia(60%);
}

左效果图，右原图

复合滤镜

多个滤镜效果组合在一起，创建更复杂的视觉效果

img {
    -webkit-filter: contrast(150%) brightness(75%) grayscale(50%); /* Chrome, Safari, Opera */
    filter: contrast(150%) brightness(75%) grayscale(50%);
}

左效果图，右原图