CSS3 滤镜(Filters)

CSS3滤镜效果提供了一种将视觉效果应用于图像的简便方法。

了解CSS3滤镜功能

在本章中,我们将讨论CSS3中引入的滤镜效果,您可以在将滤镜效果绘制到网页上之前,对图像等图形元素执行视觉效果操作,如模糊,平衡对比度或亮度,色彩饱和度等。

可以使用CSS3 filter属性将滤镜效果应用于元素,该属性按提供的顺序接受一个或多个滤镜功能。使用示例如下:

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

警告:任何版本的Internet Explorer当前均不支持CSS3滤镜效果。较旧的IE版本支持非标准filter属性来创建诸如不透明度之类的效果,但是该功能已被弃用。

模糊效果

像高斯模糊效果这样的Photoshop可以使用该blur()功能应用于元素。此函数接受CSS长度值作为定义模糊半径的参数。较大的值将产生更多的模糊。如果未提供参数,则使用值0。

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
测试看看‹/›

—上面示例的输出如下所示:

鹦鹉图像  
鹦鹉图像  
鹦鹉图像  
blur(0)blur(2px)blur(5px)

设置图像亮度

brightness()功能可用于设置图像的亮度。的值0%将创建全黑的图像。而值100%或1使图像不变。其他值是效果的线性乘数。

您还可以将亮度设置为高于100%,这样可以使图像更亮。如果缺少数量参数,则使用值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%);
}
测试看看‹/›

—上面示例的输出如下所示:

鹦鹉图像  
鹦鹉图像  
鹦鹉图像  
brightness(50%)brightness(100%)brightness(200%)

注意:75%接受以百分号表示的值(例如)的过滤器函数也接受以十进制表示的值(如0.75)。如果该值无效,该函数将返回none并且将不应用任何滤镜效果。

调整图像对比度

contrast()功能用于调整图像的对比度。的值0%将创建全黑的图像。而值100%或1保持图像不变。还允许超过100%的值,从而提供对比度较低的结果。如果数量参数缺失或省略,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%);
}
测试看看‹/›

—上面示例的输出如下所示:

鹦鹉图像  
鹦鹉图像  
鹦鹉图像  
contrast(50%)contrast(100%)contrast(200%)

向图像添加阴影

您可以使用该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(0)drop-shadow(2px 2px 4px orange)drop-shadow(4px 4px 10px orange)

注意:drop-shadow()函数的第一个和第二个参数分别指定阴影的水平和垂直偏移,而第三个参数指定模糊半径,最后一个参数指定阴影颜色,就像该box-shadow属性一样,但有一个例外,' inset'不允许使用关键字。

将图像转换为灰度

使用此grayscale()功能可以将图像转换为灰度。值100%完全是灰度。值0%保留图像不变。之间的值0%并且100%是在效果线性乘法器。如果缺少数量参数,则使用值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%);
}
测试看看‹/›

—上面示例的输出如下所示:

鹦鹉图像  
鹦鹉图像  
鹦鹉图像  
grayscale(0)grayscale(50%)grayscale(100%)

在图像上应用色相旋转

该hue-rotate()功能在图像上应用色相旋转。传递的参数定义了将调整图像样本的色环周围的度数。值0deg保留图像不变。如果angle缺少' '参数,0deg则使用值。没有最大值,上面的值的效果会360deg回绕。

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);
}
测试看看‹/›

—上面示例的输出如下所示:

鹦鹉图像  
鹦鹉图像  
鹦鹉图像  
hue-rotate(0)hue-rotate(150deg)hue-rotate(480deg)

反转效果

可以使用invert()函数将像Photoshop这样的反转效果应用于图像。 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%);
}
测试看看‹/›

—上面示例的输出如下所示:

鹦鹉图像  
鹦鹉图像  
鹦鹉图像  
invert(0)invert(80%)invert(100%)

对图像应用不透明度

opacity()功能可用于为图像添加透明度。值0%是完全透明的。的值100%或1保持图像不变。之间的值0%并且100%是在效果线性乘法器。如果缺少' amount'参数,则使用值1。此功能类似于该opacity属性。

img {
    -webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
    filter: opacity(80%);
}
测试看看‹/›

—上面示例的输出如下所示:

鹦鹉图像  
鹦鹉图像  
鹦鹉图像  
opacity(100%)opacity(80%)opacity(30%)

将棕褐色效果应用于图像

该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%);
}
测试看看‹/›

—上面示例的输出如下所示:

鹦鹉图像  
鹦鹉图像  
鹦鹉图像  
sepia(0%)sepia(30%)sepia(100%)

提示:在摄影方面,棕褐色调是一种特殊的处理方法,可以使黑白照片具有较暖的色调(红棕色),以增强其存档质量。

调整图像的饱和度

该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%);
}
测试看看‹/›

—上面示例的输出如下所示:

鹦鹉图像  
鹦鹉图像  
鹦鹉图像  
saturate(100%)saturate(200%)saturate(0%)

注意:该url()函数指定对特定过滤器元素的过滤器引用。例如,url(commonfilters.svg#foo)。如果过滤器对不存在的元素的引用或所引用的元素不是过滤器元素,则整个过滤器链都将被忽略。没有过滤器应用于元素。