filter

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

CSS 过滤器是一个强大的工具,作者可以使用它来实现不同的视觉效果(有点像浏览器的 Photoshop 过滤器)。 CSS filter 属性在元素显示之前提供对元素渲染的模糊或颜色偏移等效果的访问。 过滤器通常用于调整图像、背景或边框的渲染。

语法是

.filter-me {
  filter: blur(3px);
  filter: grayscale(1);
  filter: saturate(2.2);

  filter: none; /* remove existing filter */
}

有许多函数可用于值

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() – 用于应用 SVG 过滤器
  • custom() – “即将推出”

可以使用多个函数,用空格隔开。

.do-more-things {
  filter: blur(20px) grayscale(20%);
}

过滤器函数

要使用 CSS 过滤器属性,请为上面列出的以下函数之一指定一个值。 如果值无效,则函数返回“none”。 除非另有说明,否则以百分号表示的值(如 34%)的函数也接受以小数表示的值(如 0.34)。

这是一个演示,可以让您随意玩弄各个过滤器。

grayscale()

filter: grayscale(20%)

/* same as... */
filter: grayscale(0.2);

将输入图像转换为灰度。 “amount”的值定义转换的比例。 100% 的值完全为灰度。 0% 的值使输入保持不变。 0% 到 100% 之间的值是对效果的线性倍数。 如果缺少“amount”参数,则使用 100% 的值。 不允许负值。

sepia()

filter: sepia(0.8);

/* same as... */
filter: sepia(80%);

将输入图像转换为棕褐色。 “amount”的值定义转换的比例。 100% 的值完全为棕褐色。 0% 的值使输入保持不变。 0% 到 100% 之间的值是对效果的线性倍数。 如果缺少“amount”参数,则使用 100% 的值。 不允许负值。

saturate()

filter: saturate(2);

/* same as... */
filter: saturate(200%);

使输入图像饱和。 “amount”的值定义转换的比例。 0% 的值完全不饱和。 100% 的值使输入保持不变。 其他值是对效果的线性倍数。 允许超过 100% 的值,提供超级饱和的结果。 如果缺少“amount”参数,则使用 100% 的值。 不允许负值。

hue-rotate()

filter: hue-rotate(180deg);

/* same as... */
filter: hue-rotate(0.5turn);

对输入图像应用色调旋转。 “angle”的值定义输入样本将围绕色轮调整的度数。 0deg 的值使输入保持不变。 如果缺少“angle”参数,则使用 0deg 的值。 最大值为 360deg

invert()

filter: invert(100%);

反转输入图像中的样本。 “amount”的值定义转换的比例。 100% 的值完全反转。 0% 的值使输入保持不变。 0% 到 100% 之间的值是对效果的线性倍数。 如果缺少“amount”参数,则使用 100% 的值。 不允许负值。

opacity()

filter: opacity(0.5);

/* same as... */
filter: opacity(50%);

对输入图像中的样本应用透明度。 “amount”的值定义了转换的比例。 0% 的值为完全透明。 100% 的值保持输入不变。 0% 到 100% 之间的值是效果的线性倍数。 这等效于将输入图像样本乘以 amount。 如果“amount”参数缺失,则使用 100% 的值。 此函数类似于更成熟的 opacity 属性; 区别在于,对于过滤器,某些浏览器提供硬件加速以提高性能。 不允许负值。

brightness()

filter: brightness(0.5);

/* same as... */
filter: brightness(50%);

将线性倍数应用于输入图像,使其看起来更亮或更暗。 0% 的值将创建一个完全黑色的图像。 100% 的值保持输入不变。 其他值是效果的线性倍数。 允许 amount 大于 100% 的值,提供更亮的结果。 如果“amount”参数缺失,则使用 100% 的值。

contrast()

filter: contrast(4);

/* same as... */
filter: contrast(400%);

调整输入的对比度。 0% 的值将创建一个完全黑色的图像。 100% 的值保持输入不变。 允许 amount 大于 100% 的值,提供对比度更低的结果。 如果“amount”参数缺失,则使用 100% 的值。

blur()

filter: blur(5px);
filter: blur(1rem);

对输入图像应用高斯模糊。 “radius”的值定义了高斯函数的标准偏差值,或者屏幕上多少像素相互混合,因此较大的值将产生更多模糊。 如果没有提供参数,则使用 0 值。 参数指定为 CSS 长度,但不接受百分比值。

drop-shadow()

filter: drop-shadow(2px 2px 5px rgb(0 0 0 / 0.5));
filter: drop-shadow(4px 4px red); /* no blur */

对输入图像应用阴影效果。 阴影实际上是输入图像 alpha 遮罩的模糊、偏移版本,以特定颜色绘制,并合成在图像下方。 该函数接受类型为 (在 CSS3 背景中定义) 的参数,但 “inset” 关键字除外。

此函数类似于更成熟的 box-shadow 属性; 区别在于,对于过滤器,某些浏览器提供硬件加速以提高性能。

box-shadow 只将框作为其路径处理不同,drop-shadow 还会自然地模拟预期对象的轮廓。

就像 text-shadow 一样,没有 “spread” 参数来创建大于对象的实心阴影。

url()

filter: url()

url() 函数采用指定 SVG 过滤器的 XML 文件的位置,并且可以包含指向特定过滤器元素的锚点。 这是一个教程,它可以作为 SVG 过滤器的良好介绍,并附带一个有趣的演示。

Animating Filters

由于过滤器是可动画的,因此可以打开许多有趣的可能性。

Notes

您可以组合任意数量的函数来操纵渲染,但顺序仍然很重要(即,在 sepia() 之后使用 grayscale() 将导致完全灰色的输出)。

除了 “none” 之外的计算值将创建堆叠上下文,与 CSS 透明度相同。 过滤器属性对目标元素的框模型的几何形状没有影响,即使过滤器会导致在元素的边框框之外进行绘制。 目标元素的任何部分都受过滤器函数的影响。 这包括应用过滤器的元素及其后代的任何内容、背景、边框、文本装饰、轮廓和可见滚动机制。 过滤器也可以应用于内联内容,例如单个文本跨度。

该规范还引入了用于图像的 filter(image-URL, filter-functions) 包装函数。 它可以让您在 CSS 中使用图像时对任何图像进行过滤。 例如,您可以模糊背景图像,而不会模糊文本。 此过滤器函数目前浏览器尚不支持。 作为临时解决方案,您可以将背景和过滤器都应用于伪元素,以创建类似的效果。

IE 专属过滤器

也使用了 filter 属性,例如

.half-opacity {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}

主要用于需要支持 IE 8 及以下版本的透明度。

更多信息

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
18*35796*

移动/平板

Android ChromeAndroid FirefoxAndroidiOS Safari
1271274.4*6.0-6.1*