滤镜用到图片或 video 上会有很有意思的效果。
1、blur 高斯模糊
这个属性总的来说就是打码。有单位的打码，大概的就是每 1 像素打 n 单位码的意思，所以数值越大越模糊。
单位是常用的 px\em\rem\...；
- -webkit-filter: blur(5px);
- filter: blur(5px);
效果看这里：点我查看示例效果
2、grayscale 灰度
让图片变灰，意思就是说去色（褪色）。
从 0 到 100 的百分比变化或 0 到 1 的小数位变化，0 就是不去色，固定单位 % 或数值；
- -webkit-filter: grayscale(100%);
- filter: grayscale(100%);
效果看这里：点我查看示例效果
3、 opacity 透明度
把图片变透明，可惜不能透明衣服。
从 0 到 100 的百分比变化或 0 到 1 的小数位变化，1 就是不透明，固定单位 % 或数值；
- -webkit-filter: opacity(35%);
- filter: opacity(35%);
效果看这里：点我查看示例效果
4、sepia 复古度
加了这个属性，会发现图片复古风扑面而来。
从 0 到 100 的百分比变化或 0 到 1 的小数位变化，0 就是不变化，固定单位 % 或数值；
- -webkit-filter: sepia(35%);
- filter: sepia(35%);
效果看这里：点我查看示例效果
5、contrast 对比度
Photoshop 上的那个对比度，没错，效果一毛一样。
从 0 到 100 的百分比变化或 0 到 1 的小数位变化，1 就是不变化，固定单位 % 或数值；超过 100% 效果更佳。
- -webkit-filter: contrast(150%);
- filter: contrast(150%);
效果看这里：点我查看示例效果
6、 saturate 饱和度
饱和度，对的，能让图片饱和一点，可不能饿着了。大概就是让图片看起来色泽好看一点。
从 0 到 100 的百分比变化或 0 到 1 的小数位变化，1 就是不变化，固定单位 % 或数值；超过 100% 效果更佳。
- -webkit-filter: saturate(250%);
- filter: saturate(250%);
效果看这里：点我查看示例效果
7、drop-shadow 阴影
对的，跟 box-shadow 应该是失散多年的兄妹。
不给毕竟是妹妹，没大哥功能多。例如阴影无法多重叠加。
- -webkit-filter: drop-shadow(0 3px 9px #000);
- filter: drop-shadow(0 3px 9px #000);
效果看这里：点我查看示例效果
8、invert 反相
颜色反相，也就反色，把颜色变成对立的颜色。
从 0 到 100 的百分比变化或 0 到 1 的小数位变化，0 就是不变化，固定单位 % 或数值；超过 100% 效果等同100%。
- -webkit-filter: invert(100%);
- filter: invert(100%);
效果看这里：点我查看示例效果
9、brightness 亮度
颜色发亮，亮一点、暗一点都行。
默认值为 1（100%）。超过 100% 就是加亮。 低于 100% 则变暗（夜间模式？）。
从 0 到 100 的百分比变化或 0 到 1 的小数位变化，1 就是不变化，固定单位 % 或数值；超过 100% 效果变亮，低于100% 变暗。
- -webkit-filter: brightness(130%);
- filter: brightness(130%);
效果看这里：点我查看示例效果
10、hue-rotate 颜色旋转
颜色也能旋转，跟旋转木马一样。
一个大转盘 360 度，慢慢转吧，转到哪里就什么颜色，相比 invert 反相更能自由调节色调。
从 0 到 360 deg 的角度变化，0 就是不变化，固定单位 deg；
- -webkit-filter: hue-rotate(90deg);
- filter: hue-rotate(90deg);
效果看这里：点我查看示例效果
完毕！
粤公网安备 44010602006221号