卡卡网

CSS 数据类型<filter-function>代表可以改变输入图像外观的图形效果。它可以用于filter 和 backdrop-filter 属性。

语法

<filter-function> 数据类型由下列过滤器函数之一指定的。每个函数需要一个参数，如果参数无效，结果不会被改变，如同没有使用过滤器一样。

blur()

模糊图像

brightness()

让图像更明亮或更暗淡

contrast()

增加或减少图像的对比度

drop-shadow()

在图像后方应用投影

grayscale()

将图像转为灰度图

hue-rotate()

改变图像的整体色调

invert()

反转图像颜色

opacity()

改变图像透明度

saturate()

超饱和或去饱和输入的图像

sepia()

将图像转为棕褐色

~~~~~~~~~~ ~~~~~~~~~~

下面详细介绍使用此数据类型的属性：filter 以及 backdrop-filter。

filter

CSS filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

有几个函数（例如 blur() 和 contrast()）可以帮助你实现预定义的效果。

效果如图

语法

/* <filter-function> 值 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* URL */
filter: url("filters.svg#filter-id");

/* 多个滤镜 */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* 不使用滤镜 */
filter: none;

/* 全局值 */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

可以使用如下方法设置函数： 

CSS

filter: <filter-function> [<filter-function>]* | none;

你可以使用 url() 来引用 SVG 滤镜元素。可以使用如下语法引用 SVG <filter> 元素：

CSS

filter: url(file.svg#filter-element-id);

函数

filter 属性可设置为 none 或下面列出的一个或多个函数。如果任何函数的参数无效，则该函数返回 none。除特殊说明外，函数的值如果接受百分比值（如 34%），那么该函数也接受小数值（如 0.34）。

当单个 filter 属性具有多个函数时，滤镜将按顺序依次应用。

blur()

将高斯模糊应用于输入图像。

filter: blur(5px);

brightness()

将线性乘法器应用于输入图像，以调整其亮度。值为 0% 将创建全黑图像；值为 100% 会使输入保持不变，其他值是该效果的线性乘数。如果值大于 100% 将使图像更加明亮。 

filter: brightness(2);

contrast()

调整输入图像的对比度。值是 0% 将使图像变灰；值是 100%，则无影响；若值超过 100% 将增强对比度。

filter: contrast(200%);

drop-shadow()

使用 <shadow> 参数沿图像的轮廓生成阴影效果。阴影语法类似于 <box-shadow>（在 CSS 背景和边框模块中定义），但不允许使用 inset 关键字以及 spread 参数。与所有 filter 属性值一样，任何在 drop-shadow() 后的滤镜同样会应用在阴影上。

filter: drop-shadow(16px 16px 10px black);

grayscale()

将图像转换为灰度图。值为 100% 则完全转为灰度图像，若为初始值 0% 则图像无变化。值在 0% 到 100% 之间，则是该效果的线性乘数。

filter: grayscale(100%);

hue-rotate()

应用色相旋转。<angle> 值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。

filter: hue-rotate(90deg);

invert()

反转输入图像。值为 100% 则图像完全反转，值为 0% 则图像无变化。值在 0% 和 100% 之间，则是该效果的线性乘数。

filter: invert(100%);

opacity()

应用透明度。值为 0% 则使图像完全透明，值为 100% 则图像无变化。

filter: opacity(50%);

saturate()

改变图像饱和度。值为 0% 则是完全不饱和，值为 100% 则图像无变化。超过 100% 则增加饱和度。 

filter: saturate(200%);

sepia()

将图像转换为深褐色。值为 100% 则完全是深褐色的，值为 0% 图像无变化。

filter: sepia(100%);

组合函数

你可以组合任意数量的函数来控制渲染。滤镜将按声明顺序依次应用。以下示例增强了图像的对比度和亮度。

filter: contrast(175%) brightness(103%);

示例

应用 filter 函数

filter 属性被应用于第二张图片，为其本身以及边框添加灰度和模糊效果。

CSS

img {
  border: 5px solid yellow;
}
/* 为第二张图像应用 40% 灰度并以 5px 进行模糊 */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}

HTML

<img src="pencil.jpg" alt="原图清晰" />
<img src="pencil.jpg" alt="该图像及其边框被应用了模糊和灰度效果" />

效果

重复滤镜函数

滤镜函数按出现顺序应用。可以重复相同的滤镜函数。

CSS

#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
        red);
}

效果

滤镜函数按顺序应用。这就是阴影颜色不同的原因：第一个阴影的色调被 hue-rotate() 函数改变，而第二个阴影的色调没有被改变。

backdrop-filter

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

CSS

/* 关键词值 */
backdrop-filter: none;

/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;

语法

值：none

没有应用于背景的滤镜。

值：<filter-function-list>

一个以空格分隔的滤镜函数（<filter-function>）或是要应用到背景上的 SVG 滤镜。

示例

CSS

.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url(https://picsum.photos/id/1080/6858/4574),
    linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

HTML

<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>

效果

总结

本文详细介绍了<filter-function>过滤器函数，介绍了使用此数据类型的属性：filter 以及 backdrop-filter。希望对你有所帮助。

标签: filter-function  过滤器函数  filter  backdrop-filter