css3——filter

filter 属性定义了元素(通常是<img>)的可视效果（我试了一下，几乎可以对所有的元素进行可视效果操作（元素内部所有内容，也包括背景效果））

1、filter:blur(npx); 给元素设置高斯模糊效果；

2、filter:brightness(percent); 调整图像的亮度； percent = 0 时全黑，percent = 50%时像是加了一层透明度为0.5 背景色时黑色的蒙版，对文字和背景图片都有影响；percent = 100% 时正常没有效果； percent >100%时图片变亮，文字和背景色没有明显变化；

            filter: brightness(50%);
            /* 看上去像是在元素上加了一层透明度为0.5 背景色是黑色的蒙版 */

3、filter:contrast(percent);调整图片的对比度；percent = 0 时全黑，percent = 50%时比brightness 的效果亮一点，只是颜色趋近，对比度减小，对文字和背景图片都有影响；percent = 100% 时正常没有效果； percent >100%时图片暗的像素更暗，亮的像素更亮；

            filter: contrast(50%);

4、filter:drop-shadow(x-offset y-offset bulr scale color) 设置背景阴影；几个参数之间空格隔开；

参数值：x方向偏移量（正负控制方向），y方向偏移量，模糊，背景放大或缩小（默认0，负数缩小，正数放大），设置背景阴影颜色（和浏览器相关）；

5、filter:grayscale(percent) 将图片变为灰度图片显示； percent = 0 时 没有变化 percent = 50% 时 饱和度降低，可见的变灰；percent = 100%， 显示跟报纸差不多，ps将rgb模式转CMYK，报纸印刷；

            filter: grayscale(100%);

6、filter:hue-rotate(deg)；给图像应用色相旋转； 默认0deg； 我设置了背景颜色为红色，然后色度从红变-黑-绿-蓝-紫-粉-红；其中因为对颜色不敏感没看出来的不算…… 应该是在色盘上按莫一角度转一圈，将颜色按某一透明度叠加在上面吧…… 应该……官方解释：给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

filter: hue-rotate(40deg);

7、filter:invert(percent) 反相； percent = 0 是正常的； percent = 100% 是完全反相； 反相就效果照相机里有，很想X光片的那个效果……percent >=0；小于0 的话没效果 相当于0；

            filter: invert(0%);

 8、filter:opacity(percent) 透明度；

9、filter:saturate(percent) 饱和度；

10、filter:sepia(%) 将图像转换为深褐色;

11、filter:url(svg) URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素；

svg不是太懂，以后回来补。