滤镜（filter）

CSS 滤镜是一种方便的方式，用于为元素添加视觉效果。原本需要在 Photoshop 或其他图像编辑软件中完成的任务，现在可以直接通过 CSS 实现！我们可以使用 filter 属性来添加模糊、饱和度调整等效果，还可以改变不透明度、亮度等！虽然滤镜常用于图片效果，但它可以应用于任何元素。

语法如下：

1img {
2  filter: <filter-function>;
3}

可用的滤镜选项包括：

• blur()
• contrast()
• brightness()
• grayscale()
• drop-shadow()
• hue-rotate()
• opacity()
• invert()
• sepia()
• saturate()
• url()

每个滤镜的值都写在括号内。

例如：

1img {
2  filter: opacity(0.5);
3}

这会使图像变为 50% 透明，因为 opacity() 的取值范围是 0 到 1，也可以使用百分比形式。

我们还可以在一行代码中应用多个滤镜：

1img {
2  filter: blur(20px) grayscale(20%);
3}

接下来我们逐一详细说明每个滤镜。

blur() 滤镜

blur() 滤镜为元素添加模糊效果。

所选的值决定了模糊半径的大小。值越大，混合的像素越多，模糊效果越明显。

1img {
2  filter: blur(4px);
3}

值可以用 px、rem 或 em 单位表示。

opacity() 滤镜

opacity() 滤镜为元素添加透明效果。

它接受从 0 到 1 的值，也可以使用百分比形式，如 0.5 表示 50% 透明。该滤镜控制图像的透明程度。

0（或 0%）表示完全透明，1（或 100%）表示完全不透明。

1img {
2  filter: opacity(0.5);
3}

CSS 中还有一个 opacity 属性，但使用 filter 属性在浏览器性能上更优，因此推荐使用此方式。

drop-shadow() 滤镜

drop-shadow() 滤镜为元素添加阴影。

它最多可接受五个参数，前两个是必需的：

• offset-x：水平偏移量。
• offset-y：垂直偏移量。

1img {
2  filter: drop-shadow(10px 10px);
3}

• blur-radius：定义阴影的模糊半径，默认值为 0（无模糊）。

1img {
2  filter: drop-shadow(10px 10px 2px);
3}

• spread-radius：定义阴影的扩展半径，单位为 px、rem 或 em。

1img {
2  filter: drop-shadow(10px 10px 2px 5px);
3}

• color：定义阴影颜色。

1img {
2  filter: drop-shadow(10px 10px 2px 5px red);
3}

grayscale() 滤镜

grayscale() 滤镜将元素转换为灰度。

值表示比例，0%（或 0）表示原始图像状态，使用 100% 时图像将完全变为灰色。

1img {
2  filter: grayscale(50%);
3}

sepia() 滤镜

sepia() 滤镜将元素转换为棕褐色。

同样，值表示比例，100% 表示完全棕褐色，0% 则保持原样不变。

1img {
2  filter: sepia(50%);
3}

invert() 滤镜

invert() 滤镜反转元素的颜色。

该滤镜根据 HSL 色彩轮原理，将颜色反转为对应相反色。

100% 表示完全反转，0% 表示无变化。50% 时始终显示为灰色，因为灰色位于色彩轮的中间位置。

1img {
2  filter: invert(50%);
3}

hue-rotate() 滤镜

色彩轮以角度表示。hue-rotate() 滤镜允许我们通过正负旋转来调整颜色。该函数接受 deg 值（度），0deg 不改变颜色，360deg 为最大值。

1img {
2  filter: hue-rotate(90deg);
3}

brightness() 滤镜

brightness() 滤镜调整元素的亮度。0% 时元素呈黑色，100% 时保持原样不变。

1img {
2  filter: brightness(50%);
3}

contrast() 滤镜

contrast() 滤镜调整元素的对比度。0% 时元素呈灰色，100% 时保持原样不变。

1img {
2  filter: contrast(50%);
3}

saturate() 滤镜

saturate() 滤镜调整元素的饱和度。0% 时完全去色（全灰），100% 时无变化。

1img {
2  filter: saturate(50%);
3}

url() 滤镜

url() 滤镜允许我们引入位于外部 SVG 文件中的自定义滤镜。

参数为文件路径：

1img {
2  filter: url(filter.svg);
3}