CSS3 滤镜
CSS3 滤镜效果提供了一种将视觉效果应用于图像的简便方法。
了解 CSS3 滤镜功能
在本章中，我们将讨论 CSS3 中引入的滤镜效果，你可以使用它对图形元素来执行视觉效果操作，如模糊，平衡对比度或亮度，颜色饱和度等，然后将其绘制到网页上。
可以使用 CSS3 filter 属性将滤镜效果应用于元素，该属性按照提供的顺序接受一个或多个滤镜功能。
filter: blur() | contrast() | grayscale() | invert() | sepia() | url() ;
警告： 任何版本的 Internet Explorer 当前都不支持 CSS3 滤镜效果。较早版本的 IE 支持非标准 filter 属性来创建不透明效果，但此功能已被弃用。
模糊效果
像 Photoshop 的高斯模糊效果可以使用 blur() 函数来应用于元素。此函数接受 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%);
}
- 上面示例的输出将如下所示：
在图像上应用色调旋转
hue-rotate() 功能在图像上应用色调旋转。传递的参数定义了将调整图像样本的色环周围的度数。值 0deg 保持图像不变。如果缺少 angle 参数，则使用值 0deg。没有最大值限制，超过 360deg 的值将被限制到 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);
}
- 上面示例的输出将如下所示：
反转效应
像 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。此功能类似于 opacity 属性。
img {
-webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
filter: opacity(80%);
}
- 上面示例的输出将如下所示：
将棕褐色效应应用于图像
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%);
}
- 上面示例的输出将如下所示：
注意： 该 url() 函数指定对特定滤镜元素的滤镜引用。例如， url(commonfilters.svg#foo) 。如果对不存在的元素的滤镜引用或引用的元素不是滤镜元素，则忽略整个滤镜链。没有滤镜应用于元素。