css 滤镜

/* CSS 滤镜示例代码 */

/* 灰度滤镜 */
.gray-scale {
  filter: grayscale(100%);
}

/* 高斯模糊滤镜 */
.blur {
  filter: blur(5px);
}

/* 亮度调整滤镜 */
.brightness {
  filter: brightness(150%);
}

/* 对比度调整滤镜 */
.contrast {
  filter: contrast(200%);
}

/* 颜色反转滤镜 */
.invert {
  filter: invert(100%);
}

/* 饱和度调整滤镜 */
.saturate {
  filter: saturate(300%);
}

/* 不透明度调整滤镜 */
.opacity {
  filter: opacity(50%);
}

/* 色相旋转滤镜 */
.hue-rotate {
  filter: hue-rotate(90deg);
}

/* 组合多个滤镜效果 */
.combined-filters {
  filter: grayscale(50%) blur(3px) brightness(70%);
}

解释说明：

• filter 是 CSS 中用于应用图形效果（如模糊或颜色偏移）的属性。
• 上述代码展示了多种常见的滤镜效果，包括灰度、模糊、亮度、对比度、颜色反转、饱和度、不透明度和色相旋转。
• 每个滤镜效果可以通过调整参数来改变强度。例如，grayscale(100%) 表示完全灰度，而 blur(5px) 表示 5 像素的高斯模糊。
• 最后一个示例展示了如何组合多个滤镜效果，以创建更复杂的效果。