filter

描述

filter CSS 属性用于将艺术效果应用于元素。 通常用于图像模糊、增加对比度、转换为黑白等。

提示

在线CSS Image Filter生成器以查看正在使用 filter 的属性。

效果展示

语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
  hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

值

• blur() 用于模糊图像的过滤器。模糊量以像素为单位指定。如果未指定数字，则默认值为 0。
• brightness() 使图像或背景图片变暗或变亮。
• contrast() 降低或增加图像或背景图片的对比度。
• drop-shadow() 为图像添加阴影。与属性框阴影相反，将考虑图像中的透明区域，并在考虑阴影时对其进行投射。
• grayscale() 将图像转换为黑白。
• hue-rotate() 在输入图像上应用色调旋转。角度值定义将调整输入样本的颜色圆圈周围的度数。
• invert() 反转输入图像中的样本。金额的值定义了转换的比例。值 100% 是完全反转的。值为 0% 时，输入保持不变。
• opacity() 将透明度应用于输入图像中的样本。金额的值定义了转换的比例。值 0% 是完全透明的。值为 100% 时，输入保持不变。
• saturate() 使输入图像饱和。金额的值定义了转换的比例。值为 0% 表示完全不饱和。值为 100% 时，输入保持不变。
• sepia() 将输入图像转换为棕褐色。金额的值定义了转换的比例。值为 100% 是完全棕褐色的。值为 0% 时，输入保持不变。
• url() 指向具有特定 #id 的 SVG 元素的 CSS 链接。