CSS 各种滤镜代码解释 用法案例

什么是 CSS 滤镜

CSS 滤镜是 CSS3 新增的一项特性，通过应用各种滤镜效果，可以让网页设计更加生动和有趣。滤镜代码可以应用于 HTML 元素背景和前景，让网站的颜色和图片效果更加丰富多彩。

常用的 CSS 滤镜效果

1. 模糊效果（blur）

blur 可以将元素模糊化，数值越大，模糊程度越高。

.blur {
  filter: blur(5px);
}

2. 锐化效果（brightness）

brightness 可以控制元素的亮度，取值范围为 0~1。

.bright {
  filter: brightness(0.8);
}

3. 对比度效果（contrast）

contrast 可以控制元素的对比度，数值越大，对比度越高。

.contrast {
  filter: contrast(150%);
}

4. 不透明度效果（opacity）

opacity 可以控制元素的透明度，取值范围为 0~1。

.opacity {
  filter: opacity(0.5);
}

5. 灰度效果（grayscale）

grayscale 可以将元素转换为灰度图像，数值越大，灰度程度越高。

.grayscale {
  filter: grayscale(75%);
}

6. 饱和度效果（saturate）

saturate 可以控制元素的饱和度，数值越大，颜色饱和度越高。

.saturate {
  filter: saturate(200%);
}

7. 反相颜色效果（invert）

invert 可以将元素的颜色反转，取值范围为 0~1。

.invert {
  filter: invert(100%);
}

8. 混合模式效果（mix-blend-mode）

mix-blend-mode 可以控制元素的混合模式，常用的值有 multiply、screen、overlay 等。

.mix-mode {
  mix-blend-mode: multiply;
}

案例说明

1. 图片模糊效果

<img src="image.jpg" class="blur">

.blur {
  filter: blur(5px);
}

此示例中，将图片添加模糊效果，通过 blur 滤镜可以使图片更加柔和，整体效果更加美观。

2. 文字饱和度效果

<div class="saturate">
  <h1>标题文字</h1>
  <p>正文文字</p>
</div>

.saturate {
  filter: saturate(200%);
}

此示例中，将整个文本块的文字饱和度增加，让标题和正文更加醒目，吸引注意力。