跳到主要内容

filter

2023年02月17日
柏拉文
越努力，越幸运

一、认识​

filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG 滤镜，通过一个 URL 链接到 SVG 滤镜元素

二、语法​

2.1 普通语法​

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

/* <filter-function> values */
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%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;
Copy to Clipboard

2.2 函数语法​

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

filter-function 如下:

  • blur() 函数将高斯模糊应用于输入图像。radius 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。若没有设置值，默认为 0。该参数可以指定为 CSS 长度，但不接受百分比值。

    • 语法:

      filter: blur(5px)

  • brightness() 函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。值为 0% 将创建全黑图像。值为 100% 会使输入保持不变。其他值是效果的线性乘数。如果值大于 100% 提供更明亮的结果。若没有设置值，默认为 1。

    • 语法:

      filter: brightness(2)

  • contrast(): 函数可调整输入图像的对比度。值是 0% 的话，图像会全黑。值是 100%，图像不变。值可以超过 100%，意味着会运用更低的对比。若没有设置值，默认是 1。

    • 语法:

      filter: contrast(200%)

  • drop-shadow(): 函数对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。函数接受 <shadow>（在 CSS3 背景中定义）类型的值，除了 inset 和 spread 关键字。该函数与已有的 box-shadow 属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。

    • <shadow> 参数如下:

      • <offset-x> <offset-y>（必须）: 这是设置阴影偏移量的两个 <length> 值。 <offset-x> 设定水平方向距离，负值会使阴影出现在元素左边。 <offset-y> 设定垂直距离，负值会使阴影出现在元素上方。查看 <length> 了解可能的单位。 如果两个值都是 0，则阴影出现在元素正后面（如果设置了<blur-radius> 且/或 <spread-radius> 也会有模糊效果）。

      • <blur-radius>: 这是第三个 <length> 值。值越大，越模糊，所以阴影可以变得更大或更淡。不允许负值。若未设定，默认是 0（则阴影的边界很锐利）。

      • <color>: 查看 <color> 了解该值可能的关键字和标记。若未设定，颜色值基于浏览器 —— 通常是 <color> 属性的值，但请注意，在这种情况下，Safari 当前会绘制透明阴影。

    • <shadow> 语法如下:

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

  • grayscale(): 函数将改变输入图像灰度。amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0

    • 语法:

      filter: grayscale(100%)

  • hue-rotate(): 函数在输入图像上应用色相旋转。angle 一值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。若值未设置值，默认为 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。

    • 语法:

      filter: hue-rotate(90deg)

  • invert(): 函数反转输入图像。amount 的值定义转换的比例。值为 100% 则图像完全反转。值为 0% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘数。若未设置值，则默认为 0。

    • 语法:

      filter: invert(100%)

  • opacity(): 转化图像的透明程度。amount 的值定义转换的比例。值为 0% 则是完全透明，值为 100% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘数。也相当于图像样本乘以数量。若未设置值，则默认为 1。该函数与已有的 opacity 属性很相似，不同之处在于通过 filter，一些浏览器为了提升性能会提供硬件加速。

    • 语法:

      filter: opacity(50%)

  • saturate(): 函数转换图像饱和度。amount 的值定义转换的比例。值为 0% 则是完全不饱和，值为 100% 则图像无变化。其他值是效果的线性乘数。超过 100% 则有更高的饱和度。若未设置值，则默认为1。

    • 语法:

      filter: saturate(200%)

  • sepia(): 函数将图像转换为深褐色。amount 的值定义转换的比例。值为 100% 则完全是深褐色的，值为 0% 图像无变化。值在 0% 到 100% 之间，值是效果的线性乘数。若未设置值，则默认为 0。

    • 语法:

      filter: sepia(100%)

2.3 引用滤镜​

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