cssfilter属性

/* 示例代码：使用 CSS filter 属性 */

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

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

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

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

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

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

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

/* 添加阴影效果 */
.drop-shadow-effect {
  filter: drop-shadow(16px 16px 20px blue);
}

/* 多重滤镜组合 */
.combined-filters {
  filter: grayscale(50%) blur(4px) opacity(70%);
}

解释说明：

• grayscale()：将图像转换为灰度图像，参数值范围是 0% 到 100%。
• blur()：对图像进行模糊处理，参数值为像素单位（如 5px），值越大越模糊。
• brightness()：调整图像的亮度，参数值可以超过 100% 来增加亮度，或低于 100% 来降低亮度。
• contrast()：调整图像的对比度，参数值可以超过 100% 来增加对比度，或低于 100% 来降低对比度。
• invert()：反转图像的颜色，参数值为 100% 时完全反转。
• opacity()：调整图像的透明度，参数值范围是 0% 到 100%。
• saturate()：调整图像的饱和度，参数值可以超过 100% 来增加饱和度，或低于 100% 来减少饱和度。
• drop-shadow()：为图像添加阴影效果，参数值为 x-offset y-offset blur-radius color。
• combined-filters：可以组合多个滤镜效果，按顺序应用。