CSS3滤镜种类

CSS3 Filters滤镜效果共有十种特效,分別是:

CSS Filter 特效名称
grayscale 灰度
sepia 褐色老照片色
saturate 饱和度
hue-rotate 色相旋转
invert 反色
opacity 透明度
brightness 亮度
contrast 对比度
blur 模糊
drop-shadow 阴影

语法

elm {
    filter: none | <filter-function > [ <filter-function> ]*;
}

需要考虑兼容其他的浏览器,需要添加浏览器厂商前缀。不过目前,只有-webkit这样的写法(即chrome和safari)支持:

filter: type(value);
-webkit-filter: type(value);
-moz-filter: type(value);
-ms-filter: type(value);
-o-filter: type(value);

这些CSS属性的属性值基本上都是0到1之间的数值,可以是小数或者百分数,但有几个例外,blur属性值以像素为单位,可以是任何整数。而hue-rotate滤镜值以"deg"单位,度数。

应用示例

blur(radius)

创建Gaussian模糊,radius为模糊半径。radius默认值为0,表示不模糊。

用法: -webkit-filter: blur(2px);

brightness(amount)

亮度滤镜,amount的范围是-100%(dark) ~ 100%(light),默认值为0。

用法: -webkit-filter: brightness(30%);

contrast(amount)

对比度滤镜,默认值为100%。
用法: -webkit-filter: contrast(30%);

grayscale(amount)

灰度滤镜。默认值是100%。

用法: -webkit-filter: grayscale();

sepia(amount)

sepia褐色老照片效果。默认值为100%。

用法: -webkit-filter: sepia();

invert(amount)

反色滤镜。默认值为100%。

用法: -webkit-filter: invert();

opacity(amount)

透明度滤镜。默认值为100%。

用法: -webkit-filter: opacity(30%);

Saturate(amount)

饱和度滤镜。默认值为100%。

用法: -webkit-filter: saturate(50%);

hue-rotate(angle)

色相旋转滤镜。默认值为0deg。

-webkit-filter: hue-rotate(90deg);

drop-shadow()

阴影滤镜。

用法: -webkit-filter: drop-shadow(rgba(0,0,0,0.5) 0 5px 5px);

使用SVG滤镜做增强效果

可兼容FireFox、Chrome和IE9+。

filter: url(resources.svg#svgBlur);
<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

组合滤镜

另外,CSS3滤镜还可以组合使用,如:

filter: blur(3px) hue-rotate(180deg) drop-shadow(3px 5px 5px #000);

兼容性

目前只有Webkit浏览器支持CSS3 Filter,这些Filter不仅可以用在图片上,也可以用在普通的DOM元素包括视频上,作为渐进增强的效果还是推荐使用的。

回顾

Filter实现原理:IE浏览器下是添加滤镜来实现滤镜特效,而其他浏览器是使用Canvas中的getImageData方法对每个像素点进行色彩转换的。

滤镜特效的局限性有:

1 . 渲染速度慢;

2 . 跨域。安全性机制,无法转换跨域的图片;。

参考文章:

CSS3 图片滤镜——by掌心 http://www.zhanxin.info/development/2012-12-19-css-filter.html

Quick Fun: CSS3 Filter Effects http://www.girliemac.com/blog/2011/12/21/quick-fun-css3-filter-effects/

CSS3 filter —— MDN https://developer.mozilla.org/en-US/docs/Web/CSS/filter

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/css/377