深入了解CSS滤镜属性filter

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

基本语法

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

常用的Filter函数

1. blur()

   • 对图像应用模糊效果。
   • 语法：filter: blur(radius);
   • radius是模糊半径，单位通常是像素(px)。值越大，模糊效果越明显。

2. brightness()

   • 调整图像的亮度。
   • 语法：filter: brightness(percentage);
   • percentage是一个百分比值，100%表示原始亮度，0%表示黑色，超过100%将增加亮度。

3. contrast()

   • 调整图像的对比度。
   • 语法：filter: contrast(percentage);
   • percentage是一个百分比值，100%表示原始对比度，0%表示完全灰色，超过100%将增加对比度。

4. drop-shadow()

   • 向图像添加一个阴影效果。它类似于box-shadow，但用于图像内容。
   • 语法：filter: drop-shadow(offset-x offset-y blur-radius color);
   • 参数类似于box-shadow。

5. grayscale()

   • 将图像转换为灰度图像。
   • 语法：filter: grayscale(percentage);
   • percentage是一个百分比值，100%完全转换为灰度，0%无变化。

6. hue-rotate()

   • 给图像应用色相旋转。
   • 语法：filter: hue-rotate(angle);
   • angle是色相旋转的角度，单位通常是度(deg)。正值表示顺时针旋转，负值表示逆时针旋转。

7. invert()

   • 反转图像的颜色。
   • 语法：filter: invert(percentage);
   • percentage是一个百分比值，100%表示完全反转，0%表示无变化。

8. opacity()

   • 类似于opacity属性，但它是filter的一部分，并且只影响图像内容，不影响其子元素。
   • 语法：filter: opacity(percentage);
   • percentage是一个百分比值，表示透明度。

9. saturate()

   • 调整图像的色彩饱和度。
   • 语法：filter: saturate(percentage);
   • percentage是一个百分比值，100%表示原始饱和度，0%表示完全去色，超过100%将增加饱和度。

10. sepia()

    • 将图像转换为深褐色。
    • 语法：filter: sepia(percentage);
    • percentage是一个百分比值，100%表示完全深褐色，0%表示无变化。

注意事项

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