CSS3 Filter滤镜效果一

   这一期我们来分享一下一个好玩的CSS3属性Filter滤镜效果。滤镜起初是SVG规范的一部分。然而，当滤镜效果越来越明显时，W3C开始为CSS增加一些常用的滤镜效果。CSS3 Filter滤镜是非常强大的，并且非常容易使用。可以来为图像或者其他添加模糊、灰度、亮度等效果。它们可以单独使用，也可以与其他滤镜组合使用，并遵循一下规则。

• 一、CSS3 Filter语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

   提示: 使用空格分隔多个滤镜。

• 二、浏览器支持情况

   表格中的数字表示支持该方法的第一个浏览器的版本号。

   紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

   注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

三、现在规范中支持的最常用的十种效果

   这次我们先来了解一下CSS3 Filter滤镜的前五个效果：grayscale 灰度 、sepia 褐色　、saturate 饱和度、hue-rotate 色相旋转、invert 反色。

1.grayscale 灰度

   grayscale(%)将图像转换为灰度图像，效果类似于黑白照片。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

DEMO演示

二维码

2.sepia 褐色

   sepia(%)将图像转换为深褐色，也就是常见的将图片调为老照片效果。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

DEMO演示

二维码

3.saturate 饱和度

   saturate(%)转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。负值是不允许的。

DEMO演示

二维码

4.hue-rotate 色相旋转

   hue-rotate(deg)给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈，也就是取90deg的效果跟取450deg的效果是一样的。

DEMO演示

二维码

5.invert 反色

   invert(%)反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

DEMO演示

二维码

   今天和大家分享的CSS3 Filter滤镜的前五种效果：grayscale 灰度 、sepia 褐色　、saturate 饱和度、hue-rotate 色相旋转、invert 反色就到这里的。我们下期将接着CSS3 Filter滤镜的后五种效果：opacity 透明度、brightness 亮度、contrast 对比度、blur 模糊、drop-shadow 阴影来再做一次分享，下期见！