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)。如果过滤器对不存在的元素的引用或所引用的元素不是过滤器元素，则整个过滤器链都将被忽略。没有过滤器应用于元素。