用 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; 提前提示渲染优化（慎用，仅限高频交互区域）

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