[分享]css中filter 过滤器

CSS中的filter是一种功能强大的工具，可用于对网页中的元素进行各种视觉效果的过滤处理。可以使用filter属性来创建多种图形效果，如模糊、变形、收缩、放大和颜色调整等。.avatar { fil...

CSS中的filter是一种功能强大的工具，可用于对网页中的元素进行各种视觉效果的过滤处理。可以使用filter属性来创建多种图形效果，如模糊、变形、收缩、放大和颜色调整等。

.avatar {
  filter: grayscale(100%); /*将彩色照片转换为黑白图片*/
}
.box {
  filter: blur(5px); /*模糊图像*/
}
.text {
  filter: brightness(50%); /*调整图像的亮度*/
} 

除了这些常见的效果之外，filter还可以使用多个功能来创建更复杂的效果。可以使用多个filter函数来叠加效果，并使用逗号来分隔它们。例如，下面的代码将创建一个黑白的图像，并在其上添加模糊效果。

.image {
  filter: grayscale(100%) blur(5px); /*叠加两个效果*/
} 

除了在元素上直接指定filter属性之外，还可以使用CSS中的伪类选择器来对元素进行过滤处理。例如，可以使用下面的代码将页面上所有的图片都变成黑白的。

img:hover {
  filter: grayscale(100%);
} 

过滤器是一种强大的工具，可以用来增强网页的视觉效果。在使用过滤器时，需要谨慎获取良好的效果，并确保过滤器不会影响网站的可用性和易用性。