<filter-function>

**<filter-function>** CSS 数据类型表示可以更改输入图片外观的图形效果。它在 filter 和 backdrop-filter 属性中使用。

语法

<filter-function> 数据类型使用下面列出的过滤器函数之一进行指定。每个函数都需要一个参数，如果参数无效，则不会应用任何过滤器。

blur(): 模糊图片。
brightness(): 使图片更亮或更暗。
contrast(): 增加或减少图片的对比度。
drop-shadow(): 在图片后面应用一个阴影。
grayscale(): 将图片转换为灰度。
hue-rotate(): 改变图片的整体色调。
invert(): 反转图片的颜色。
opacity(): 使图片透明。
saturate(): 超级饱和或去饱和输入图片。
sepia(): 将图片转换为棕褐色。

正式语法

<filter-function> = 
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>     

<blur()> = 
  blur( <length>? )  

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

<contrast()> = 
  contrast( [ <number> | <percentage> ]? )  

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<grayscale()> = 
  grayscale( [ <number> | <percentage> ]? )  

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

<invert()> = 
  invert( [ <number> | <percentage> ]? )  

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )  

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )  

<saturate()> = 
  saturate( [ <number> | <percentage> ]? )

示例

过滤器函数比较

此示例提供一个简单的图形，以及一个下拉菜单供您选择不同类型的过滤器函数，以及一个滑块供您调整过滤器函数中使用的值。更新控件会实时更新过滤器效果，让您可以调查不同过滤器的效果。

css

div {
  width: 300px;
  height: 300px;
  background: url(firefox.png) no-repeat center;
  filter: <filter-function>(<value>);
}

其中 <filter-function> 是您从下拉列表中选择的过滤器，<value> 是您使用滑块设置的值：'

规范

规范
过滤器效果模块级别 1 # typedef-filter-function

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

参见

使用此数据类型的属性：filter 和 backdrop-filter