如何在CSS中使用滤镜色彩调整_filter brightness contrast修改亮度

使用 filter 属性可调整元素亮度和对比度。1. brightness() 函数用于控制明暗，参数小于 100% 变暗，大于 100% 变亮；2. 可组合 brightness 与 contrast 同时调整视觉效果，如 brightness(120%) contrast(90%) 使元素更亮且对比减弱；3. 常见应用场景包括悬停提亮图片、禁用状态变暗按钮；4. 注意 filter 影响整个元素及其子元素，过度使用可能导致刺眼，老版 IE 不支持，建议配合 transition 实现平滑过渡。通过合理使用 filter，可增强用户交互体验。

在CSS中，你可以使用 filter 属性来调整元素的视觉效果，包括亮度（brightness）、对比度（contrast）等。要修改元素的亮度，可以使用 filter: brightness() 函数。

1. 使用 filter 调整亮度（brightness）

brightness() 函数用于调整图像或元素的亮度。它的参数是一个数值或百分比：

• 1 或 100%：原始亮度（无变化）
• 小于 1 或 100%：变暗（如 0.5 或 50%）
• 大于 1 或 100%：变亮（如 1.5 或 150%）

Midjourney

当前最火的AI绘图生成工具，可以根据文本提示生成华丽的视觉图片。

454

查看详情

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

img {
  filter: brightness(50%); /* 图像变暗一半 */
}

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

div {
  filter: brightness(1.8); /* 元素变亮80% */
}

2. 同时调整亮度和对比度

你可以在一个 filter 属性中组合多个函数，比如同时设置 brightness 和 contrast：

• brightness() 控制明暗程度
• contrast() 控制颜色对比强弱（0% 为全灰，100% 原始，大于100%增强）

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

.card {
  filter: brightness(120%) contrast(90%);
}

这个例子会让元素比原来亮20%，同时稍微降低一点对比度，使整体更柔和。

3. 实际应用场景

常见用途包括：

• 鼠标悬停时提亮图片：
  img:hover { filter: brightness(130%); }
• 禁用状态变暗按钮或卡片：
  .disabled { filter: brightness(60%) contrast(80%); }
• 制作图片预览的高光效果

4. 注意事项

• filter 属性会影响整个元素及其子元素的渲染外观
• 过度使用 high brightness 可能导致色彩溢出或刺眼
• 老版本IE不支持 filter，需考虑兼容性
• 可用 transition 平滑过渡效果，提升用户体验

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

img {
  filter: brightness(100%);
  transition: filter 0.3s ease;
}
<p>img:hover {
filter: brightness(140%);
}</p>

基本上就这些。通过灵活使用 filter 中的 brightness 和 contrast，你能轻松实现丰富的视觉反馈效果。

以上就是如何在CSS中使用滤镜色彩调整_filter brightness contrast修改亮度的详细内容，更多请关注php中文网其它相关文章！