CSS 提供了一个非常强大的工具，可以帮助为文本、图像、背景、边框等添加特殊的视觉效果。滤镜（filter）可用于调整网页这些方面的呈现。
在本章中，我们将通过示例详细讨论每个 CSS 滤镜（filter）。
- filter 属性的值可以是 none，也可以是本章后面列出的一个或多个函数。
- 如果未向任何函数传递参数或将参数传递给无效参数，则返回 none。
- 接受以百分比 （%） 表示的参数值的函数也接受以小数表示的相同值 expreseed。例如，55% 可以作为 0.55 传递
- 可以传递多个函数给 filter 属性，只是您需要在它们之间添加空格。
- 当传递多个函数时，这些滤镜（filter）将按照它们传递的顺序应用。
- 可以重复相同的过滤功能。例如：filter：blur（20px） hue-rotate（45deg） blur（15px）。
以下是可以与 filter 属性一起使用的函数列表：
| 功能 | 参数 | 描述 | 示例 |
|---|---|---|---|
| blur() | 蓝色效果的半径（px、rem 等） | 对输入图像应用模糊效果。 | filter:blur(10px); |
| brightness() | 值是百分比或小数 （%）。0% - 黑色图像，100% - 无效果，超过 100% - 提亮元素。 | 调整元素的亮度。 | filter:brightness(62% | 0.62); |
| contrast() | 值是百分比或小数 （%）。0% - 灰色，100% - 无效果，超过 100% - 产生对比度。 | 调整元素的对比度。 | filter:contrast(200%); |
| grayscale() | 值是百分比或小数 （%）。0% - 无影响，100% - 完全灰度。 | 将元素转换为灰度。 | filter:grayscale(80%); |
| drop-shadow() | 值指定水平和垂直偏移量、模糊半径以及阴影的颜色。 | 将投影效果应用于元素 | filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); |
| hue-rotate() | 值是以度为单位的角度。 | 对元素应用色相旋转。 | filter:hue-rotate(80deg); |
| invert() | 值是以度为单位的角度。 | I反转元素的颜色。 | filter: invert(75%); |
| opacity() | 值是一个百分比。0% - 完全透明，100% - 完全不透明。 | 调整元素的透明度。 | filter: opacity(75%); |
| saturate() | 值是一个百分比。 | 调整元素的饱和度。 | filter: saturate(200%); |
| sepia() | 值是一个百分比。 | 调整元素的棕褐色效果。 | filter: sepia(90%); |
| url() | 指定 SVG 滤镜（filter）的 XML 文件的路径，并且可能包含指向特定滤镜（filter）元素的定位点。 | 用于应用 SVG 滤镜。 | filter:url(svg-url#element-id); |
CSS 滤镜（filter） - blur（）
blur（） 函数用于为文本或图像添加模糊效果。
该函数可以将以下值作为参数：
blur radius：指定为 <length> 值。该值越大，模糊效果就越大。
- 默认值为 0。
- 该函数不接受百分比值。
下面是一个示例：
CSS 滤镜（filter） - brightness（）
Brightness（） 函数用于通过应用线性乘数值为文本或图像添加亮度效果。这使元素看起来更亮或更暗。
该函数可以将以下值作为参数：
amount：指定为 <number> 或 <percentage> 值。
- 该值小于 100%，会使元素变暗。
- 值超过100%，使元素明亮。
- 等于 100% 的值不起作用。
- 默认值为 1。
- 不允许使用负值。
下面是一个示例：
CSS 滤镜（filter） - contrast（）
contrast（） 函数用于为文本或图像添加对比效果。
该函数可以将以下值作为参数：
amount：指定为 <number> 或 <percentage> 值。
- 该值小于 100%，则降低对比度。
- 值超过100%，增加对比度。
- 值等于 0% 或 0，将使元素完全变灰。
- 等于 100% 的值不起作用。
- 默认值为 1。
- 不允许使用负值。
下面是一个示例：
CSS 滤镜（filter） - 投影效果
阴影效果 是图像的模糊版本，在指定图像下方以特定颜色显示。
此属性类似于 box-shadow ，后者创建矩形阴影，而 drop-shadow 创建图像本身形状的阴影。
该函数可以将以下值作为参数：
offset-x:
- 必需参数。
- 阴影的水平偏移值。
- 指定为 <length> 值。
- 可以传递负值。将阴影放置在元素的左侧。
offset-y:
- 必需参数。
- 阴影的垂直偏移值。
- 指定为 <length> 值。
- 可以传递负值。将阴影置于元素上方。
blur-radius:
- 可选参数。
- 它是阴影的模糊半径。
- 指定为 <length> 值。
- 该值越大，模糊的阴影就越大。
- 如果未指定任何值，则默认值为 0。阴影将是清晰且不模糊的。
- 不允许使用负值。
color:
- 可选参数。
- 可以传递任何颜色值，例如颜色名称、十六进制值、RGB值等。
下面是一个示例：
CSS 滤镜（filter） - grayscale（）
GrayScale（） 函数用于将输入图像转换为灰度。
该函数可以将以下值作为参数：
amount: 指定为 <number> 或 <percentage> 值。
- 值等于 100%，使输入完全灰度化。
- 值等于 0% 或 0，不会对输入进行任何更改。
- 0% 到 100% 之间的值对效果具有线性乘数。
- 如果未传递任何参数，则默认值为 1。
下面是一个示例：
CSS 滤镜（filter） - hue-rotate（）
hue-rotate（） 函数用于旋转输入元素的色调及其内容。
该函数可以将以下值作为参数：
angle: 指定为<angle>值。
- 角度（angle）值可以以递延、梯度、弧度或转弯形式传递。
- 值等于 0deg，不会对输入进行任何更改。
- 正色调旋转，增加色调值。
- 负色调旋转，降低色调值。
- 初始值为 0。
注意：除了CSS filter 属性外，hue-rotate（） 函数还可以与 CSS backdrop-filter 属性一起使用。
下面是一个示例：
CSS 滤镜（filter） - invert（）
invert（） 属性用于反转输入图像中的颜色。
该函数可以将以下值作为参数：
amount：指定为 <number> 或 <percentage> 值。
- 值等于 100%，使输入完全反转。
- 值等于 0% 或 0，不会对输入进行任何更改。
- 0% 到 100% 之间的值对效果具有线性乘数。
- 初始值为 0。
下面是一个示例：
CSS 滤镜（filter） - opacity（）
opacity（） 函数用于向输入元素添加透明度。
该函数可以将以下值作为参数：
amount：指定为 <number> 或 <percentage> 值。
- 值等于 0%，使输入完全透明。
- 值等于 100%，不会对输入进行任何更改。
- 0% 到 100% 之间的值对效果具有线性乘数。
- 初始值为 1。
下面是一个示例：
CSS 滤镜（filter） - saturate（）
saturate（） 函数是 CSS 提供的内置函数，用于使输入图像过饱和或去饱和。
该函数可以将以下值作为参数：
amount：指定为 <number> 或 <percentage> 值。
- 该值低于 100%，则图像的饱和度完全降低。
- 值超过 100%，使图像过饱和。
- 值等于 0%，使图像完全不饱和。
- 值等于 100%，对图像没有影响。
- 初始值为 1。
下面是一个示例：
CSS 滤镜（filter） - sepia（）
sepia（） 函数是 CSS 提供的内置函数，用于为输入图像添加棕褐色效果，看起来更明亮、更温暖。
该函数可以将以下值作为参数：
amount：指定为 <number> 或 <percentage> 值。
- 值等于 0%，不起作用。
- 值等于 100%，使图像完全棕褐色。
- 初始值为 0。
下面是一个示例：
CSS 滤镜（filter） - URL（）
此外，filter 属性还支持 url() 函数，该函数允许您使用 SVG 滤镜元素应用滤镜效果。例如：
当您想要应用内置滤镜函数不可用的更复杂的滤镜效果时，这非常有用。
下面是一个示例：
CSS 滤镜（filter）的组合
可以在一个声明中使用多个 filter 函数。您只需要使用空格分隔每个函数。
注意：传递 filter 函数的顺序很重要，因为 filter 是按照声明的顺序应用的。例如，如果在棕褐色之后指定灰度函数，则图像将仅显示灰度。
下面是一个示例：
