用 CSS filter: brightness() 控制亮度最精准可靠，brightness(1) 为原始亮度，0.7 适合压暗，0.4 以下易失真；避免用 opacity 替代，因其会降低整体清晰度并受背景干扰；需搭配 transition 实现顺滑动画，现代浏览器均支持，IE 不支持需降级处理。
直接用 CSS 的 filter: brightness() 最干净，比调透明度更精准、不干扰布局，也避免背景色干扰问题。
用 filter 控制亮度最可靠
亮度变化本质是调整图像像素的明暗值，filter: brightness() 就是为此设计的：
-
brightness(1)是原始亮度（100%） -
brightness(0.7)表示压暗到 70%，视觉上明显变暗但细节仍清晰 -
brightness(0.4)以下容易发黑失真，一般不建议
写法示例：
img {<br> transition: filter 0.3s ease;<br>}<br>img:hover {<br> filter: brightness(0.7);<br>}
别用 opacity 代替亮度
虽然 opacity: 0.7 看起来也变暗，但它实际是把图片和背后颜色一起变淡，一旦父容器有浅色或图案背景，效果就不可控。而且 opacity 会降低整个元素的清晰度，文字、边框也会跟着发虚。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
如果必须用透明度（比如要配合深色遮罩），请确保图片外层有固定深色背景容器，再单独控制图片透明度。
加 transition 让变化顺滑
没有过渡动画的亮度切换会“咔”一下跳变，体验生硬：
-
transition必须写在非 hover 的基础样式里，不是 hover 里 - 推荐时长
0.2s–0.35s，太短没感知，太长显迟滞 - 缓动函数用
ease或cubic-bezier(0.34, 1.1, 0.6, 1)更自然
兼容性和注意事项
现代浏览器（Chrome/Firefox/Safari/Edge）都支持 filter，IE 不支持，如需兼容可加降级：
- 基础样式保留默认亮度，不写 hover 也能正常显示
- 移动端无 hover，但 iOS Safari 和安卓 Chrome 在“桌面站点”模式下仍可触发；如需点按反馈，可额外加
:active规则 - 大量图片同时 hover 时，filter 可能轻微掉帧，可加
will-change: filter;提前提示渲染优化（慎用，仅限高频交互区域）
