CSS的filter属性是一个非常强大的工具，它允许你向元素应用各种图形效果，如模糊、亮度、对比度、色彩调整等，而无需使用图像编辑软件或额外的HTML元素。filter属性可以包含多个函数，这些函数通过空格分隔，并可以叠加使用以创建复杂的视觉效果。

基本语法

element {
  filter: function1(value1) function2(value2) ...;
}

常用的Filter函数

  1. blur()
  • 对图像应用模糊效果。
  • 语法：filter: blur(radius);
  • radius是模糊半径，单位通常是像素(px)。值越大，模糊效果越明显。
  1. brightness()
  • 调整图像的亮度。
  • 语法：filter: brightness(percentage);
  • percentage是一个百分比值，100%表示原始亮度，0%表示黑色，超过100%将增加亮度。
  1. contrast()
  • 调整图像的对比度。
  • 语法：filter: contrast(percentage);
  • percentage是一个百分比值，100%表示原始对比度，0%表示完全灰色，超过100%将增加对比度。
  1. drop-shadow()
  • 向图像添加一个阴影效果。它类似于box-shadow，但用于图像内容。
  • 语法：filter: drop-shadow(offset-x offset-y blur-radius color);
  • 参数类似于box-shadow。
  1. grayscale()
  • 将图像转换为灰度图像。
  • 语法：filter: grayscale(percentage);
  • percentage是一个百分比值，100%完全转换为灰度，0%无变化。
  1. hue-rotate()
  • 给图像应用色相旋转。
  • 语法：filter: hue-rotate(angle);
  • angle是色相旋转的角度，单位通常是度(deg)。正值表示顺时针旋转，负值表示逆时针旋转。
  1. invert()
  • 反转图像的颜色。
  • 语法：filter: invert(percentage);
  • percentage是一个百分比值，100%表示完全反转，0%表示无变化。
  1. opacity()
  • 类似于opacity属性，但它是filter的一部分，并且只影响图像内容，不影响其子元素。
  • 语法：filter: opacity(percentage);
  • percentage是一个百分比值，表示透明度。
  1. saturate()
  • 调整图像的色彩饱和度。
  • 语法：filter: saturate(percentage);
  • percentage是一个百分比值，100%表示原始饱和度，0%表示完全去色，超过100%将增加饱和度。
  1. sepia()
  • 将图像转换为深褐色。
  • 语法：filter: sepia(percentage);
  • percentage是一个百分比值，100%表示完全深褐色，0%表示无变化。

注意事项

  • filter属性不会影响页面的布局，因为它不改变元素的大小或位置。
  • filter效果可以应用于任何元素，但最常见的是用于<img>、<video>和<canvas>元素。
  • 在某些情况下，filter可能会导致性能问题，特别是在对复杂图像或大量元素应用时。
  • CSS的filter属性是一个实验性特性，但它在现代浏览器中得到了广泛的支持。然而，使用时仍然建议检查目标浏览器的兼容性。