使用 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%）
立即学习“前端免费学习笔记（深入）”；
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，你能轻松实现丰富的视觉反馈效果。
