广告背景透明度应使用rgba()而非opacity，避免文字和按钮模糊；纯色背景推荐rgba(255,255,255,0.85)，深色背景如rgba(0,0,0,0.2)需慎用。
广告区块的背景透明度不能靠 opacity 硬压，否则文字、按钮、CTA 图标全跟着发虚，用户根本点不清——这是上线前最常被 QA 打回的问题。
用 background-color: rgba() 控制纯色广告底色透明度
绝大多数 Banner、信息流广告、侧边栏推广位用的是纯色背景（比如浅蓝、米白、灰黑），这时直接改 background-color 最干净：
-
rgba(255, 255, 255, 0.85)是推荐起手值：足够透出下层内容，又不牺牲文字可读性 - 深色背景广告（如
rgba(0, 0, 0, 0.2)）慎用 alpha - 别写
background-color: #fff8;—— 十六进制带 alpha（如#RRGGBBAA）虽已支持，但 Safari 15.4 之前和部分安卓 WebView 会降级为不透明 - 如果广告需适配深色模式，
hsla()更稳：hsla(210, 10%, 95%, 0.8)调明度（l）比调 rgb 更直观，且 alpha 不受亮度影响
广告含背景图时，必须用伪元素隔离图层
轮播 Banner、大图推广位一旦用了 background-image，就绝不能碰 opacity 或 filter: opacity()，否则广告文案和按钮点击热区全变弱。正确解法是把图层抽出来：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器加
position: relative，确保伪元素能定位覆盖 -
::before必须有content: ""，否则不渲染；宽高要用top/left/right/bottom: 0拉满，不是width: 100% -
z-index: -1是关键：垫在内容底下，不影响鼠标穿透和表单交互 - 如果广告要 hover 变透明，只动伪元素的
opacity，主容器保持opacity: 1—— 这样按钮悬停反馈才正常
避免 opacity 导致广告组件功能失效
广告 SDK 常注入 iframe、动态 button、追踪 script 标签，这些对透明度极其敏感：
-
opacity: 0.7后，iOS Safari 的input[type=tel]键盘可能不弹出 - 某些广告联盟的点击埋点依赖
event.target坐标，opacity会轻微偏移触发区域（尤其在缩放页面时） - 如果广告位本身是
position: fixed，再叠opacity容易触发 iOS 16+ 的合成层异常，导致滚动卡顿 - 真要全局弱化广告存在感，优先用
backdrop-filter: brightness(0.92)（仅限现代浏览器），它不干扰事件流
真正难的不是让背景透，而是透到刚好不抢内容焦点、不干扰点击、不触发兼容性降级——多数翻车都发生在测试环境用纯色预览，上线后遇上真实图片背景和复杂 DOM 结构才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
