对图片的处理有很多方法，今天chrafz介绍下 CSS3 的图片滤镜。例如灰度，模糊，饱和，老照片等图片滤镜效果。

几种CSS3图片滤镜效果 张弦先生のchrafz.com

我们可以使用 CSS3 来实现以下的效果(由于该属性只有 webkit 内核的浏览器支持，建议使用 chrome )：

• Greyscale(灰度)
• Blur(模糊)
• Saturate（饱和)
• Sepia(老照片)
• Hue Rotate(色相旋转)
• Invert(颠倒)
• Brightness(高光)
• Contrast(对比)
• Opacity(透明度)

如何使用 CSS3 滤镜？

很简单，就如同其他的 CSS 属性一样就可以了：

和其他的部分 CSS 属性类似，我们需要兼容其他的浏览器写法，不过目前，只有-webkit这样的写法（即chrome和safari）支持：

OK, 下面我们来一一介绍：

CSS Greyscale

Greyscale 这个属性，将会使图片变灰。属性值(value)既可以是分数，也可以是百分数，它的作用是使图片更灰或者不灰。
HTML:

CSS:

CSS Blur

Blur 滤镜是使图片模糊。模糊的层度来自于设置的属性值。
HTML:

CSS:

CSS Saturate

Saturate 效果可以增加图片的颜色饱和度。这里的属性值是饱和度的比例，例如百分之两百，而百分之百则是不变。
HTML:

CSS:

CSS Sepia

Sepia 滤镜对图片的处理效果，犹如回到了五六十年代的那种老照片了。
HTML:

CSS:

CSS Hue Rotate

Hue Rotate 滤镜是对色相进行旋转，通过色相的旋转，我们可以对图片的色彩进行重组。属性值为 360 度里的值。
HTML:

CSS:

CSS Invert

Invert 滤镜是反相效果，看起来就像老相机的底片一样。
HTML:

CSS:

CSS Brightness

Brightness 滤镜是对图片的亮度进行处理，属性值为百分比。
HTML:

CSS:

CSS Contrast

Contrast 滤镜是对图片最亮的地方和最暗的地方进行调整，从而改变图片的均衡感。
HTML:

CSS:

CSS Opacity

Opacity 这个滤镜估计就比较熟悉了，是使图片透明。
HTML:

CSS:

结语

经过测试发现，如今的 Firefox 不支持 CSS 的filter属性，如要使用，可以通过使用svg来解决。