CSS滤镜教程：brightness与contrast实战应用

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《CSS滤镜调整：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%）

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，你能轻松实现丰富的视觉反馈效果。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。