CSS的filter属性详解
目录
前言
函数
blur()函数
brightness()函数
contrast()函数
drop-shadow()函数
grayscale()函数
hue-rotate() (en-US)函数
invert() (en-US)函数
opacity()函数
saturate() (en-US)函数
sepia() (en-US)函数
组合函数
前言
CSS的filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
函数
filter 属性可设置为 none 或下面列出的一个或多个函数。如果任何函数的参数无效，则该函数返回 none。除特殊说明外，函数的值如果接受百分比值（如 34%），那么该函数也接受小数值（如 0.34）。
当单个 filter 属性具有多个函数时，滤镜将按顺序依次应用。
blur()函数
blur()函数是filter属性的一种取值，用于给元素添加模糊效果。
使用blur()函数时，需要指定一个长度值作为参数，表示要应用的模糊程度。模糊程度越大，图像就越模糊。例如：
.blur-element {
filter: blur(5px);
}
上述代码将给class为"blur-element"的元素添加一个5像素的模糊效果。
除了长度值以外，blur()函数还可以接受其他单位，如像素（px）、百分比（%）等。此外，也可以通过使用不同的滤镜函数组合来创建更复杂的效果。
示例
在上面的示例中，我们创建了一个带有class为"blur-element"的div元素，并将其背景图片设置为'img/7.png'。然后，在CSS样式中，我们为该元素设置了宽度、高度和filter属性。filter属性的blur()函数被设置为5像素，这将给元素应用一个5像素的模糊效果。
brightness()函数
CSS的filter属性中的brightness()函数用于调整图像的亮度。它可以接受一个百分比值或者小数作为参数，用于指定亮度的级别。
下面是brightness()函数的使用示例：
.brightness-element {
filter: brightness(150%); /* 或者 filter: brightness(1.5); */
}
上述代码将给class为"brightness-element"的元素应用一个亮度增加50%的效果。你可以通过调整百分比或小数的值来改变亮度的级别。值为 0% 将创建全黑图像，值大于100%会增加亮度，而值小于100%会减少亮度。
如果要降低亮度，可以使用小于1的小数值或小于100%的百分比。例如，filter: brightness(0.8)会将亮度降低为80%。
需要注意的是，brightness()函数可以与其他滤镜函数组合使用，以创建更复杂的效果。
示例
contrast()函数
CSS的filter属性中的contrast()函数用于调整图像的对比度。它接受一个百分比值或者小数作为参数，用于指定对比度的级别。
下面是contrast()函数的使用示例：
.contrast-element {
filter: contrast(150%); /* 或者 filter: contrast(1.5); */
}
上述代码将给class为"contrast-element"的元素应用一个对比度增加50%的效果。可以通过调整百分比或者小数值来改变对比度的级别。值是 0% 将使图像变灰，值大于100%会增加对比度，而值小于100%会降低对比度。
如果想降低对比度，可以使用小于1的小数值或者小于100%的百分比。例如，filter: contrast(0.8)会将对比度降低为80%。
示例
drop-shadow()函数
CSS的filter属性中的drop-shadow()函数用于向图像添加阴影效果。它可以接受多个参数，包括阴影的颜色、偏移量、模糊度等。
下面是drop-shadow()函数的使用示例：
.shadow-element {
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}
上述代码将给class为"shadow-element"的元素应用一个向右下角偏移2个像素、向外扩散4个像素、颜色为半透明黑色的阴影效果。
drop-shadow()函数有三个必需的参数：水平偏移量、垂直偏移量和模糊半径。可以通过添加第四个参数来指定阴影的颜色。若省略第四个参数，则默认使用与元素同色的阴影。
下面是drop-shadow()函数的参数说明：
- 水平偏移量：阴影相对于元素的水平位移量。可以为负数，表示阴影向左偏移。
- 垂直偏移量：阴影相对于元素的垂直位移量。可以为负数，表示阴影向上偏移。
- 模糊半径：阴影模糊的半径大小。可以为0，表示完全不模糊。
- 阴影颜色：阴影的颜色。可以使用命名颜色、RGB值、十六进制颜色、HSL值等表示颜色的格式，也可以使用rgba()函数指定颜色和透明度。
示例
grayscale()函数
CSS的filter属性中的grayscale()函数用于将图像转为灰度图像。它接受一个百分比值或者小数作为参数，用于指定灰度的级别。
下面是grayscale()函数的使用示例：
.grayscale-element {
filter: grayscale(50%); /* 或者 filter: grayscale(0.5); */
}
上述代码将给class为"grayscale-element"的元素应用一个灰度效果，使图像变为原来亮度的50%。可以通过调整百分比或者小数值来改变灰度的级别。值为100%或者1表示完全灰度，而值为0%或者0表示完全恢复原色。
如果想要部分应用灰度效果，可以将灰度函数与其他滤镜函数组合使用。例如，可以使用以下代码将图像的一部分变为灰度，而保持其他部分的原色：
.grayscale-element {
filter: grayscale(100%) brightness(150%);
}
示例
hue-rotate() (en-US)函数
CSS的filter属性中的hue-rotate()函数用于对图像进行色相旋转。它接受一个角度值作为参数，用于指定旋转的角度。
下面是hue-rotate()函数的使用示例：
.hue-rotate-element {
filter: hue-rotate(90deg);
}
上述代码将给class为"hue-rotate-element"的元素应用一个色相旋转效果，将图像的色相顺时针旋转90度。可以通过调整角度值来改变旋转的程度。
hue-rotate()函数的参数是一个角度值，可以使用角度单位（如deg）表示，也可以使用弧度单位（如rad）表示。正值表示顺时针旋转，负值表示逆时针旋转。角度值可以是任意实数，但超过360度或-360度的部分会被忽略。值为 0deg，则图像无变化。
示例
invert() (en-US)函数
CSS的filter属性中的invert()函数用于将图像进行反色处理。它接受一个百分比值或者小数作为参数，用于指定反色的程度。
下面是invert()函数的使用示例：
.invert-element {
filter: invert(50%); /* 或者 filter: invert(0.5); */
}
上述代码将给class为"invert-element"的元素应用一个反色效果，使图像的颜色与原来相反，亮度和对比度保持不变。可以通过调整百分比或者小数值来改变反色的程度。值为100%或者1表示完全反色，而值为0%或者0表示完全恢复原色。
如果想要部分应用反色效果，可以将反色函数与其他滤镜函数组合使用。例如，可以使用以下代码将图像的一部分变为反色，而保持其他部分的原色：
.invert-element {
filter: invert(100%) brightness(150%);
}
示例
opacity()函数
CSS的filter属性中的opacity()函数用于调整元素的不透明度（透明度）。它接受一个百分比值或者小数作为参数，用于指定元素的透明度级别。
下面是opacity()函数的使用示例：
.opacity-element {
filter: opacity(50%); /* 或者 filter: opacity(0.5); */
}
上述代码将给class为"opacity-element"的元素应用一个透明效果，使元素的透明度降低到原来的50%。可以通过调整百分比或者小数值来改变透明度的级别。值为100%或者1表示完全不透明，而值为0%或者0表示完全透明。
需要注意的是，opacity()函数会影响元素及其内容的透明度，包括文本、图像等。如果只想调整背景的透明度而保持文本不透明，可以考虑使用rgba颜色值来设置背景色的透明度。
示例
saturate() (en-US)函数
CSS的filter属性中的saturate()函数用于调整图像的饱和度。它接受一个百分比值或者小数作为参数，用于指定饱和度的级别。
下面是saturate()函数的使用示例：
.saturate-element {
filter: saturate(200%); /* 或者 filter: saturate(2); */
}
上述代码将给class为"saturate-element"的元素应用一个饱和度增强效果，使图像变得更加鲜艳。
可以通过调整百分比或者小数值来改变饱和度的级别。值为100%或者1表示保持原有饱和度不变，而值为0%或者0表示完全去除饱和度（即灰色图像）。值大于100%或者1表示增强饱和度，而值小于100%或者1表示减少饱和度。
示例
sepia() (en-US)函数
CSS的filter属性中的sepia()函数用于将图像转换为深褐色（复古）效果。它接受一个百分比值或者小数作为参数，用于指定sepia（褐色）效果的程度。
下面是sepia()函数的使用示例：
.sepia-element {
filter: sepia(100%); /* 或者 filter: sepia(1); */
}
上述代码将给class为"sepia-element"的元素应用一个sepia效果，使图像呈现出复古的褐色调。可以通过调整百分比或者小数值来改变sepia效果的程度。值为100%或者1表示完全应用sepia效果，而值为0%或者0表示完全不应用sepia效果。
示例
组合函数
CSS的filter属性支持多个滤镜函数的组合使用，以创建更复杂的效果。可以通过空格将多个函数链接在一起，它们的顺序会影响最终效果。
以下是一些常见的filter属性的组合函数：
1、brightness()和contrast()
.brightness-contrast {
filter: brightness(150%) contrast(150%);
}
上述代码将给class为"brightness-contrast"的元素应用一个亮度增强和对比度增强的效果，使图像更加鲜明。
2、blur()和opacity()
.blur-opacity {
filter: blur(5px) opacity(50%);
}
上述代码将给class为"blur-opacity"的元素应用一个模糊和透明效果，使图像变得模糊且半透明。
3、grayscale()、sepia()和saturate()
.grayscale-sepia-saturate {
filter: grayscale(100%) sepia(50%) saturate(200%);
}
上述代码将给class为"grayscale-sepia-saturate"的元素应用一个灰度、褐色和饱和度增强的效果，使图像呈现出复古的灰色调。