css3——filter(滤镜)属性
css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的模糊效果、老照片（黑白照片）效果等
语法
filter: none | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() ;
注意：1、当使用多个滤镜时，可以用空格分隔
2、滤镜大多数使用百分比（%）
1、none（默认值，无效果，与原图一样）
代码语句
filter: none;
2、blur（px）——高斯模糊
给图像设置高斯模糊。值越大越模糊；而且边缘也会变得很模糊
如果没有设定值，则默认是0,不模糊；这个参数可设置px，但不接受百分比值！！！
代码语句
filter: blur(10px);
效果图
3、brightness(%)——亮度
给图片应用一种线性乘法，使其看起来更亮或更暗。
如果值是0%，图像会全黑；值是100%，则图像无变化；
其他的值对应线性乘数效果：值低于100%，图像会变暗；值超过100%，图像会比原来更亮。如果没有设定值，默认是1。
代码语句
filter: brightness(50%);/*变暗*/
filter: brightness(200%);/*变亮*/
效果图
4、contrast(%)——对比度
调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
对比度是对画面明暗程度的定义，是指画面黑白明暗的层次
代码语句
filter: contrast(50%)/*对比度变暗*/
filter: contrast(200%)/*对比度变亮*/
效果图
5、grayscale(%)——灰度
将图像转换为灰度图像。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
代码语句
grayscale(50%)/*不完全变灰*/
grayscale(100%)/*完全变灰(黑白照片)*/
效果图
6、hue-rotate(deg)——色相旋转
给图像应用色相旋转。值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
色相环
代码语句
hue-rotate(120deg)/*120度偏绿色*/
hue-rotate(200deg)/*200度偏蓝色*/
效果图
7、invert(%)——反转
反转输入图像。值是100%时是完全反转。值为0%则图像无变化。值是50%时会变成完全灰色，值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
代码语句
invert(40%)/*0%-50%之间，图片会变暗*/
invert(100%)/*50%-100%之间，颜色会反转*/
效果图
8、opacity(%)——透明度
转化图像的透明程度。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，若值未设置，值默认是1。
代码语句
opacity(60%)
opacity(10%)
效果图
9、saturate(%)——饱和度
转换图像饱和度。值为0%则是完全不饱和（灰度），值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
饱和对是对色彩的浓度（纯度）的定义，饱和度画面中色彩的鲜艳程度与层次
代码语句
saturate(40%)/*越小越呈现灰度*/
saturate(200%)/*颜色更饱和，色彩更鲜艳*/
效果图
10、sepia(%)——深褐色
将图像转换为深褐色。值为100%则完全是深褐色的，值为0%图像无变化。值在0%——100%之间；若未设置，值默认是0；
代码语句
filter: sepia(50%);/*浅褐色*/
filter: sepia(100%);/*深褐色，像旧照片*/
效果图
11、多种滤镜混合
代码语句
filter: brightness(120%) contrast(110%) saturate(120%) hue-rotate(-25deg)
效果图
