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