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);
}

- 上面示例的输出将如下所示:

鹦鹉图像 鹦鹉图像 鹦鹉图像
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 的值将被限制到 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) 。如果对不存在的元素的滤镜引用或引用的元素不是滤镜元素,则忽略整个滤镜链。没有滤镜应用于元素。