CSS3 滤镜
CSS3 滤镜效果提供了一种将视觉效果应用于图像的简单方法。
了解 CSS3 滤镜效果函数
在本章中，我们将讨论 CSS3 中引入的滤镜效果，您可以使用这些滤镜效果在将图像绘制到网页上之前对图形元素（如图像）执行模糊、平衡对比度或亮度、颜色饱和度等视觉效果操作。
可以使用 CSS3 filter 属性将过滤效果应用于元素，该属性按提供的顺序接受一个或多个过滤功能。
| filter: | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url(); |
警告：目前任何版本的 Internet Explorer 都不支持 CSS3 滤镜效果。 旧版本的 IE 支持非标准的 filter 属性来创建不透明度等效果，但此功能已被弃用。
模糊效果
可以使用 blur() 函数将类似 Photoshop 的高斯模糊效果应用于元素。 此函数接受 CSS 长度值作为定义模糊半径的参数。 较大的值会产生更多的模糊。 如果未提供参数，则使用值 0。
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}— 上面示例的输出将如下所示：
|
|
|
blur(0) |
blur(2px) |
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%);
}— 上面示例的输出将如下所示：
|
|
|
|
brightness(50%) |
brightness(100%) |
brightness(200%) |
注意： 采用百分号表示的值（例如 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%);
}— 上面示例的输出将如下所示：
|
|
|
|
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% 之间的值是效果的线性乘数。 如果缺少 '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%);
}— 上面示例的输出将如下所示：
|
|
|
|
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) |
反转效果
像 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%);
}— 上面示例的输出将如下所示：
|
|
|
|
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)。 如果过滤器引用不存在的元素或引用的元素不是过滤器元素，则忽略整个过滤器链。 没有对元素应用过滤器。