CSS3 filter 滤镜初探(非 IE 滤镜)

当前位置: 首页 » 记录 » css » CSS3 filter 滤镜初探(非 IE 滤镜)

分类: css 517阅读阅读模式

滤镜用到图片或 video 上会有很有意思的效果。

 

1、blur 高斯模糊

这个属性总的来说就是打码。有单位的打码,大概的就是每 1 像素打 n 单位码的意思,所以数值越大越模糊。

单位是常用的 px\em\rem\...;

  1. -webkit-filter: blur(5px);
  2. filter: blur(5px);

效果看这里:点我查看示例效果

 

2、grayscale 灰度

让图片变灰,意思就是说去色(褪色)。

从 0 到 100 的百分比变化或 0 到 1 的小数位变化,0 就是不去色,固定单位 % 或数值;

  1. -webkit-filter: grayscale(100%);
  2. filter: grayscale(100%);

效果看这里:点我查看示例效果

 

3、 opacity 透明度

把图片变透明,可惜不能透明衣服。

从 0 到 100 的百分比变化或 0 到 1 的小数位变化,1 就是不透明,固定单位 % 或数值;

  1. -webkit-filter: opacity(35%);
  2. filter: opacity(35%);

效果看这里:点我查看示例效果

 

4、sepia 复古度

加了这个属性,会发现图片复古风扑面而来。

从 0 到 100 的百分比变化或 0 到 1 的小数位变化,0 就是不变化,固定单位 % 或数值;

  1. -webkit-filter: sepia(35%);
  2. filter: sepia(35%);

效果看这里:点我查看示例效果

 

5、contrast 对比度

Photoshop 上的那个对比度,没错,效果一毛一样。

从 0 到 100 的百分比变化或 0 到 1 的小数位变化,1 就是不变化,固定单位 % 或数值;超过 100% 效果更佳。

  1. -webkit-filter: contrast(150%);
  2. filter: contrast(150%);

效果看这里:点我查看示例效果

 

6、 saturate 饱和度

饱和度,对的,能让图片饱和一点,可不能饿着了。大概就是让图片看起来色泽好看一点。

从 0 到 100 的百分比变化或 0 到 1 的小数位变化,1 就是不变化,固定单位 % 或数值;超过 100% 效果更佳。

  1. -webkit-filter: saturate(250%);
  2. filter: saturate(250%);

效果看这里:点我查看示例效果

 

7、drop-shadow 阴影

对的,跟 box-shadow 应该是失散多年的兄妹。

不给毕竟是妹妹,没大哥功能多。例如阴影无法多重叠加。

  1. -webkit-filter: drop-shadow(0 3px 9px #000);
  2. filter: drop-shadow(0 3px 9px #000);

效果看这里:点我查看示例效果

 

8、invert 反相

颜色反相,也就反色,把颜色变成对立的颜色。

从 0 到 100 的百分比变化或 0 到 1 的小数位变化,0 就是不变化,固定单位 % 或数值;超过 100% 效果等同100%。

  1. -webkit-filter: invert(100%);
  2. filter: invert(100%);

效果看这里:点我查看示例效果

 

9、brightness 亮度

颜色发亮,亮一点、暗一点都行。

默认值为 1(100%)。超过 100% 就是加亮。 低于 100% 则变暗(夜间模式?)。

从 0 到 100 的百分比变化或 0 到 1 的小数位变化,1 就是不变化,固定单位 % 或数值;超过 100% 效果变亮,低于100% 变暗。

  1. -webkit-filter: brightness(130%);
  2. filter: brightness(130%);

效果看这里:点我查看示例效果

 

10、hue-rotate 颜色旋转

颜色也能旋转,跟旋转木马一样。

一个大转盘 360 度,慢慢转吧,转到哪里就什么颜色,相比 invert 反相更能自由调节色调。

从 0 到 360 deg 的角度变化,0 就是不变化,固定单位 deg;

  1. -webkit-filter: hue-rotate(90deg);
  2. filter: hue-rotate(90deg);

效果看这里:点我查看示例效果

 

完毕!

相关文章