YIXUNFE/blog

CSS Filter Effects

Opened this issue · 0 comments

NancyFan commented

CSS Filter Effects

CSS3 最初的滤镜效果是用于 SVG 的，W3C 将其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的规范，Webkit 率先支持了它。CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜，一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。

使用方法

Filters主要是运用在图片上，以实现一些特效。Fliter语法为：
filter: none | < filter-function > [ < filter-function> ]*

其默认值是none，他不具备继承性，其中filter-function具有以下值可选：

  1. blur(模糊)
  2. grayscale(灰度)
  3. sepia(怀旧)
  4. saturation(饱和度)
  5. hue Rotate(色相)
  6. invert(反相)
  7. opacity(透明度)
  8. brightness(亮度)
  9. contrast(对比度)
  10. drop-shadow(阴影)

浏览器兼容性

image

效果实现

Blur(模糊)

图像模糊参数单位:px/em/pt；默认值：0px。e.g.
filter:blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
image

Grayscale(灰度)

灰度参数:百分比 0%-100%；默认值：100％，如果你在grayscale()中没有任何参数值，将会以“100%”渲染。e.g.
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
image

Sepia(怀旧)

怀旧参数:百分比 0%-100%；默认值：100%。e.g.
filter: sepia(100%);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
image

Saturation(饱和度)

饱和度参数:半分比,以100%为中间值；默认值：100%。e.g.
filter: saturate(50%);
-webkit-filter: saturate(50%);
-moz-filter: saturate(50%);
-o-filter: saturate(50%);
-ms-filter: saturate(50%);
饱和度大于100%
image
饱和度小于100%
image

Hue Rotate(色相)

色相参数:角度值0—360；默认值：0deg。e.g.
filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
-ms-filter: hue-rotate(180deg);
image

Invert(反相)

反相参数：百分比；0%-100%；默认值100%。e.g.
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
image

opacity(透明度)

filter: opacity(80%);
-webkit-filter: opacity(80%);
-moz-filter: opacity(80%);
-o-filter: opacity(80%);
-ms-filter: opacity(80%);
image

brightness(亮度)

亮度参数:"-1"至"1",值越大亮度越高。e.g.
filter: brightness(0.3);
-webkit-filter: brightness(0.3);
-moz-filter: brightness(0.3);
-o-filter: brightness(0.3);
-ms-filter: brightness(0.3);
亮度大于0
image
亮度小于0
image

contrast(对比度)

对比度参数:百分比；以100%为中间值。e.g.
filter: contrast(50%);
-webkit-filter: contrast(50%);
-moz-filter: contrast(50%);
-o-filter: contrast(50%);
-ms-filter: contrast(50%);
对比度小于100%
image
对比度大于100%
image

drop-shadow(阴影)

filter: drop-shadow(5px 5px 5px #ccc);
-webkit-filter: drop-shadow(5px 5px 5px #ccc);
-moz-filter: drop-shadow(5px 5px 5px #ccc);
-o-filter: drop-shadow(5px 5px 5px #ccc);
-ms-filter: drop-shadow(5px 5px 5px #ccc);
image