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 是原始亮度的两倍
写法要规范，避免失效
常见错误是单位混用或写错格式：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- ✅ 正确写法：
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 避免裁切。
