filter 属性是 CSS 中用于给元素应用图形效果(滤镜)的属性。它可以用于调整元素的可视效果,包括改变元素的颜色、模糊、对比度等。

具体的使用方式如下:
/* 语法 */
filter: none | <filter-function> | <url-filter>;

/* 示例 */
.element {
  filter: grayscale(50%); /* 将元素呈现为50%的灰度 */
}

.image {
  filter: blur(5px); /* 对图像应用5像素的模糊效果 */
}

/* 多个滤镜叠加 */
.box {
  filter: grayscale(50%) blur(5px) brightness(120%); /* 多个滤镜叠加 */
}

常见的 <filter-function> 包括:

  •  blur(): 对元素进行模糊处理。

  •  brightness(): 调整元素的亮度。

  •  contrast(): 调整元素的对比度。

  •  grayscale(): 将元素呈现为灰度。

  •  hue-rotate(): 旋转元素的色相。

  •  invert(): 反转元素的颜色。

  •  opacity(): 调整元素的透明度。

  •  saturate(): 调整元素的饱和度。

  •  sepia(): 将元素呈现为深褐色。


你还可以使用 <url-filter> 指定一个 SVG 文件作为滤镜,但这较为复杂,一般使用内置的滤镜函数更为方便。

这些滤镜可以单独应用,也可以组合使用,实现更复杂的效果。请注意,滤镜属性在一些较老版本的浏览器中可能不被完全支持,因此在使用时要考虑浏览器的兼容性。


转载请注明出处:http://www.zyzy.cn/article/detail/6064/CSS