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