CSS 滤镜

前端
CSS
作者

yangjh

发布日期

October 31, 2023

CSS filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

filter 基本概念和作用

CSS Filter（滤镜）是 CSS3 中新增的一个模块，允许在浏览器中直接对元素应用各种滤镜效果，而无需使用图像编辑软件或 JavaScript 库。通过 CSS Filter，您可以对元素的颜色、亮度、对比度、饱和度、模糊、锐化等进行调整，创建出各种独特的视觉效果。

CSS Filter 的作用是在不改变元素内容的情况下，改变元素的外观。它可以应用于具有 background-image 属性或 filter 属性的元素上。CSS Filter 可以对元素的图像进行处理，也可以对元素的背景色或文本颜色进行处理。

CSS Filter 的语法是通过指定一个或多个滤镜函数，并将它们组合在一起形成一个滤镜链来实现的。每个滤镜函数接受一个或多个参数，用于调整滤镜的效果。

常用滤镜函数

以下是常用的 CSS Filter 函数，您可以使用这些函数来创建各种独特的视觉效果：

  1. blur()：模糊滤镜，用于模糊图像。参数值表示模糊半径，值越大，模糊程度越高。
  2. brightness()：亮度滤镜，用于调整图像的亮度。参数值可以是负数，表示降低亮度；也可以是正数，表示增加亮度。
  3. contrast()：对比度滤镜，用于调整图像的对比度。参数值可以是负数，表示降低对比度；也可以是正数，表示增加对比度。
  4. drop-shadow()：投影滤镜，用于在图像上添加投影效果。参数值分别为水平偏移量、垂直偏移量、模糊半径和颜色。
  5. grayscale()：灰度滤镜，用于将图像转换为灰度图像。
  6. hue-rotate()：色调旋转滤镜，用于旋转图像的色调。参数值表示旋转角度，单位为度。
  7. invert()：反转滤镜，用于反转图像的颜色。
  8. opacity()：透明度滤镜，用于调整图像的透明度。参数值为 0 到 1 之间的小数，表示透明度的百分比。
  9. saturate()：饱和度滤镜，用于调整图像的饱和度。参数值可以是负数，表示降低饱和度；也可以是正数，表示增加饱和度。
  10. sepia()：褐色滤镜，用于将图像转换为褐色色调。

通过组合使用这些 CSS Filter 函数，您可以创建出各种独特的视觉效果，增强网站的视觉吸引力和用户体验。需要注意的是，CSS Filter 的支持情况因浏览器而异，您可以通过使用 CSS polyfill 或使用预处理器（如 Sass 或 Less）来提供浏览器兼容性。

例如：

img {
  filter: sepia(100%);
}

在上面的示例中，我们使用了 sepia() 滤镜将所有图片转换为褐色色调。参数值为 100%，表示完全转换为褐色。

body {
  background-image: url('image.jpg');
  filter: blur(5px);
}

在上面的示例中，我们使用了 blur() 滤镜将背景图像模糊 5 像素。您可以将 url('image.jpg') 替换为您自己的背景图像路径。

需要注意的是，CSS Filter 的支持情况因浏览器而异。为了提供更好的浏览器兼容性，您可以使用 CSS polyfill 或预处理器（如 Sass 或 Less）来处理不支持 CSS Filter 的浏览器。

滤镜函数的组合使用

组合使用不同的 CSS Filter 函数可以创建出各种独特的视觉效果。以下是一些示例：

  1. 组合使用 blur() 和 brightness() 滤镜：

    img {
filter: blur(5px) brightness(1.5);
}

    在上面的示例中，我们使用了 blur(5px) 滤镜将图片模糊 5 像素，然后使用 brightness(1.5) 滤镜将图片的亮度增加 1.5 倍。

  2. 组合使用 blur() 和 contrast() 滤镜：

    img {
filter: blur(5px) contrast(2);
}

    在上面的示例中，我们使用了 blur(5px) 滤镜将图片模糊 5 像素，然后使用 contrast(2) 滤镜将图片的对比度增加 2 倍。

  3. 组合使用 blur()、contrast() 和 grayscale() 滤镜：

    img {
filter: blur(5px) contrast(2) grayscale(100%);
}

    在上面的示例中，我们使用了 blur(5px) 滤镜将图片模糊 5 像素，然后使用 contrast(2) 滤镜将图片的对比度增加 2 倍，最后使用 grayscale(100%) 滤镜将图片转换为灰度图像。

通过组合使用不同的 CSS Filter 函数，您可以创建出各种独特的视觉效果，增强网站的视觉吸引力和用户体验。

参考资料

  1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
回到顶部