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

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

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

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

如何使用 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来解决。