滤镜用到图片或 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);
效果看这里:点我查看示例效果
完毕!