css3 滤镜filters – CSS3高级教程 css3滤镜效果|CSS

上一章CSS3高级教程请查看：css3 flexbox弹性布局
CSS3滤镜效果提供了一种将视觉效果应用于图像的简单方法。
了解CSS3的过滤功能在这一章中，我们将讨论CSS3中引入的过滤器效果，你可以使用它来执行视觉效果操作，例如在将图像绘制到web页面之前，对图形元素(如图像)执行模糊、平衡对比度或亮度、颜色饱和度等。
可以使用CSS3筛选器属性将筛选效果应用于元素，该属性按提供的顺序接受一个或多个筛选器功能。

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

警告: 目前任何版本的Internet Explorer都不支持CSS3过滤效果，旧版本的IE支持一个非标准的滤镜属性来创建像不透明度这样的效果，但是这个功能已经被弃用了。
模糊的效果使用blur()函数可以将Photoshop中的高斯模糊效果应用到元素上，这个函数接受CSS长度值作为参数，它定义了模糊半径，较大的值会产生更多的模糊，如果没有提供参数，则使用值0。

img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); }

上面示例的输出将类似如下:

文章图片
设置图像亮度brightness()函数可用于设置图像的亮度，0%的值将创建一个完全黑色的图像。然而，如果值为100%或1，则图像保持不变，其他值是对效果的线性乘数。
你也可以把亮度设置得比100%高，这样可以得到更亮的图像，如果缺少amount参数，则使用值1。不允许有负值。

img.bright { -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */ filter: brightness(200%); } img.dark { -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */ filter: brightness(50%); }

上面示例的输出将类似如下所示：

文章图片
注意: 接受百分号(例如75%)表示的值的滤镜函数也接受十进制表示的值(例如0.75)。如果该值无效，则函数返回none，并且不应用滤镜效果。
调整图像对比度contrast()函数的作用是: 调整图像的对比度。0%的值将创建一个完全黑色的图像。然而，如果值为100%或1，则图像保持不变。值超过100%也是允许的，这提供了较少的对比结果。如果缺少或省略了amount参数，则使用值1。

img.bright { -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */ filter: contrast(200%); } img.dim { -webkit-filter: contrast(50%); /* Chrome, Safari, Opera */ filter: contrast(50%); }

上面示例的输出将类似如下:

文章图片
添加投影到图像可以使用drop-shadow()函数将投影效果应用到Photoshop等图像上。这个函数类似于box-shadow属性。

img { -webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */ filter: drop-shadow(4px 4px 10px orange); }

上面示例的输出将类似如下所示

文章图片
注意: drop-shadow()函数的第一个和第二个参数分别指定阴影的水平和垂直偏移量，而第三个参数指定模糊半径，最后一个参数指定阴影颜色，就像box-shadow属性一样，除了一个例外，不允许使用’ inset’ 关键字。
将图像转换为灰度可以使用grayscale()函数将图像转换为灰度,100%的值是完全灰色的, 0%的值使图像保持不变，值之间的0%和100%是线性乘数的影响。如果缺少amount参数，则使用0值。

img.complete-gray { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } img.partial-gray { -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */ filter: grayscale(50%); }

【css3 滤镜filters – CSS3高级教程】上面示例的输出将类似如下所示

文章图片
在图像上应用色调旋转color -rotate()函数对图像应用色调旋转,传递的参数定义了图像样本将被调整的颜色圆的度数，0度的值使图像保持不变，如果缺少“angle”参数，则使用0deg值，不存在最大值。

img.hue-normal { -webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */ filter: hue-rotate(150deg); } img.hue-wrap { -webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */ filter: hue-rotate(480deg); }

上面示例的输出将类似如下所示

文章图片
反转效果像Photoshop这样的反转效果可以用invert()函数应用到图像上，100%或1的值是完全相反的，0%的值保持输入不变，值之间的0%和100%是线性乘数的影响，如果缺少“amount”参数，则使用0值，不允许有负值。

img.partially-inverted { -webkit-filter: invert(80%); /* Chrome, Safari, Opera */ filter: invert(80%); } img.fully-inverted { -webkit-filter: invert(100%); /* Chrome, Safari, Opera */ filter: invert(100%); }

上面示例的输出将类似如下所示

文章图片
对图像应用不透明度opacity()函数可以用于应用透明度的图像。0%的值是完全透明的, 值为100%或1时，图像保持不变,值之间的0%和100%是线性乘数的影响。如果缺少“amount”参数，则使用值1。这个函数类似于不透明度属性。

img { -webkit-filter: opacity(80%); /* Chrome, Safari, Opera */ filter: opacity(80%); }

上面示例的输出将类似如下所示

文章图片
应用Sepia效果的图像sepia()函数的作用是: 将图像转换为sepia。值为100%或1时，完全为棕褐色。0%的值使图像保持不变。值之间的0%和100%是线性乘数的影响。如果缺少“amount”参数，则使用0值。

img.complete-sepia { -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */ filter: sepia(100%); } img.partial-sepia { -webkit-filter: sepia(30%); /* Chrome, Safari, Opera */ filter: sepia(30%); }

上面示例的输出将类似如下所示

文章图片
提示: 在摄影术语中，棕褐色调是一种特殊的处理方法，使黑白照片的色调更温暖(红褐色)，以提高其档案质量。
调整图像的饱和度saturate()函数的作用是:调整图像的饱和度。0%的值是完全不饱和的，100%的值保持图像不变。其他值是对效果的线性乘数，数值超过100%也允许，提供超饱和的结果。如果缺少“amount”参数，则使用值1。

img.un-saturated { -webkit-filter: saturate(0%); /* Chrome, Safari, Opera */ filter: saturate(0%); } img.super-saturated { -webkit-filter: saturate(200%); /* Chrome, Safari, Opera */ filter: saturate(200%); }

上面示例的输出将类似如下所示