CSS | 过滤器属性

CSS过滤器属性是CSS3中提供的一种可用于修改元素渲染的属性，可以实现一些比较酷炫的效果。其主要作用是用来处理图像、视频等多媒体资源，可以通过修改像素点的透明度、颜色值、亮度、对比度等属性来达到不同的效果。

过滤器属性列表

CSS中可用的过滤器属性如下：

• blur()：给元素添加高斯模糊效果，需要指定模糊半径。
• brightness()：调整元素的亮度，取值范围为0~1，0为全黑，1为原亮度。
• contrast()：调整元素的对比度，取值范围为0~1，0为全灰，1为原对比度。
• grayscale()：将元素转为灰度图像，取值范围为0~1，0为原图像，1为全灰。
• hue-rotate()：调整元素的色调，取值范围为0deg~360deg，0deg为原色调。
• invert()：将元素颜色进行反转，取值范围为0~1，0为原图像，1为全反转。
• opacity()：调整元素的不透明度，取值范围为0~1，0为全透明，1为全不透明。
• saturate()：调整元素的饱和度，取值范围为0~100%，0为灰度图像，100%为原饱和度。
• sepia()：将元素转为复古风格，取值范围为0~1，0为原图像，1为全复古。

使用方法

使用CSS过滤器属性需要在元素的样式中添加filter属性，并指定要使用的过滤器属性和相应的值。

/* 在元素上添加高斯模糊效果 */
.blur {
  filter: blur(5px);
}

/* 将元素亮度减半 */
.dim {
  filter: brightness(0.5);
}

/* 将元素转为灰度图像 */
.gray {
  filter: grayscale(1);
}

/* 调整元素的色调 */
.hue {
  filter: hue-rotate(180deg);
}

/* 反转元素颜色 */
.invert {
  filter: invert(1);
}

/* 调整元素的不透明度 */
.transparent {
  filter: opacity(0.5);
}

/* 增加元素的饱和度 */
.saturate {
  filter: saturate(200%);
}

/* 将元素转为复古风格 */
.sepia {
  filter: sepia(1);
}

兼容性

虽然CSS过滤器属性在现代浏览器中得到了广泛支持，但在某些老旧浏览器上可能会出现兼容性问题。在使用过滤器属性时，建议通过Modernizr等工具来检测浏览器是否支持该属性，以便在不支持时提供备选样式。