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不是太懂,以后回来补。