如何用css filter实现模糊、亮度、对比度调整

CSS filter 属性可实现模糊、亮度、对比度等视觉效果。1. blur() 设置高斯模糊，数值越大越模糊；2. brightness() 调整明暗，百分比低于100%变暗，高于100%变亮；3. contrast() 改变对比度，0%为灰色，高于100%增强对比；4. 多个函数可用空格分隔组合使用，如模糊加调亮。示例：.frosted-glass { filter: blur(8px) brightness(90%) contrast(110%); } 注意过度使用可能影响可读性，需根据场景调整参数。

使用 CSS filter 属性可以轻松实现图像或元素的模糊、亮度、对比度等视觉效果调整。它适用于图片、背景、文字甚至视频，只需在目标元素上添加相应的 filter 函数即可。

1. 模糊（Blur）

通过 blur() 函数为元素添加高斯模糊效果，参数是模糊半径，单位为 px。

• 数值越大，模糊程度越高
• 值为 0 表示无模糊

示例：

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

58

查看详情

img {
  filter: blur(5px);
}

2. 亮度调整（Brightness）

使用 brightness() 函数控制元素的明暗程度。

立即学习“前端免费学习笔记（深入）”；

• brightness(100%) 表示原始亮度
• 小于 100% 变暗，如 brightness(50%)
• 大于 100% 变亮，如 brightness(150%)
• 值为 0% 时元素全黑，超过 100% 会显得更亮甚至发白

示例：

.darken {
  filter: brightness(30%);
}

3. 对比度调整（Contrast）

用 contrast() 函数增强或减弱颜色对比。

• contrast(100%) 保持原样
• 低于 100% 降低对比，如 contrast(50%)
• 高于 100% 提升对比，如 contrast(200%)
• 设为 0% 时所有像素变为灰色

示例：

.high-contrast {
  filter: contrast(180%);
}

4. 组合多个效果

你可以将多个 filter 函数写在一起，用空格分隔。

• 模糊 + 降低亮度：用于模态框背景
• 提高亮度 + 增强对比：突出显示图片

示例：

.frosted-glass {
  filter: blur(8px) brightness(90%) contrast(110%);
}

基本上就这些。CSS filter 使用简单，性能也不错，适合做轻量级视觉处理。注意过度模糊或高亮度可能影响可读性，建议结合实际场景微调参数。

以上就是如何用css filter实现模糊、亮度、对比度调整的详细内容，更多请关注php中文网其它相关文章！