CSS 的 filter: brightness() 是最简单、兼容性好且无需 JS 的图片明暗控制方案；亮度值为 1（或 100%）时无变化，小于 1 变暗（0 为纯黑），大于 1 变亮（2 为两倍亮度）；须规范书写单位，推荐 brightness 放在 filter 链首位，并注意 iOS Safari 响应及 overflow 裁切问题。

用 CSS 的 filter: brightness() 就能直接控制图片明暗度，这是最简单、兼容性好、无需 JS 的方案。

亮度值怎么填才有效

brightness() 接收一个数值或百分比，代表相对原始亮度的比例：

• 1 或 100%：原始亮度，无变化
• 小于 1（如 0.7、70%）：变暗，0 会变成纯黑
• 大于 1（如 1.3、130%）：变亮，2 是原始亮度的两倍

写法要规范，避免失效

常见错误是单位混用或写错格式：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• ✅ 正确写法：filter: brightness(0.8); 或 filter: brightness(80%);
• ❌ 错误写法：filter: brightness(80);（缺 % 单位，会被忽略）
• ❌ 错误写法：filter: brightness=0.8;（语法错误）

和其他滤镜一起用要注意顺序

如果同时调亮度、对比度、饱和度等，brightness 应放在 filter 链最前面，因为它是基础光照调整：

• 推荐顺序：filter: brightness(1.1) contrast(0.95) saturate(1.2);
• 如果 brightness 写在后面，可能被前面的 saturate 或 hue-rotate 影响视觉感知，导致调不精准

移动端和特殊场景小提醒

在 iOS Safari 上，brightness 对极暗（1.8）的响应略迟钝，建议实测时步进用 0.1；另外，若图片容器设了 overflow: hidden，brightness > 1 时边缘可能出现泛白，可加 transform: translateZ(0) 或微调 padding 避免裁切。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！