广告背景透明应使用rgba()设置background-color的alpha值，避免用opacity导致文字发虚；带背景图的广告需用::before伪元素隔离并单独设opacity；iframe广告需内外同时设透明。
广告背景必须透明，但文字、按钮、图标不能变淡——直接用 opacity 就会连广告文案一起发虚，这是最常踩的坑。
用 background-color: rgba() 只透背景，不透内容
这是最稳妥、兼容性最好、也最容易控制的方式。广告容器（比如 <div class="ad-banner">）只改背景色的 alpha 值，其余一切照常。
<ul>
<li>
<code>background-color: rgba(255, 255, 255, 0.1) → 极淡白底，透出页面滚动内容
background-color: rgba(0, 0, 0, 0.15) → 微弱黑底，提升文字对比度又不遮挡背景图rgb(0,0,0,0.5)：缺了 a 就是无效语法，整条声明被浏览器忽略#fff 不能直接加透明度，必须转成 rgba() 或用 hsla()
背景图广告想调透明度？别碰 opacity，用伪元素隔离
如果广告本身是带图的（比如 banner 图 + 文案），要让图变淡但文字保持锐利，唯一干净解法是把图抽到 ::before 伪元素里单独控透明度。
- 父容器必须设
position: relative，否则::before会脱离定位上下文 -
::before必须有content: ""，否则不渲染 - 尺寸靠
top: 0; left: 0; right: 0; bottom: 0拉满，比写width: 100%; height: 100%更可靠 - 示例关键代码：
`.ad-with-bg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("ad.jpg"); opacity: 0.4; z-index: -1; }`
广告嵌在 iframe 里时，透明得从两边同时设
iframe 自身默认是不透明白底，光在父页设样式没用；必须 iframe 内部文档也配合清空背景。
立即学习“前端免费学习笔记（深入）”；
- 父页面 iframe 标签加
style="background: transparent" - iframe 所加载的 HTML 文件里，
body和外层容器都要设background: transparent或background-color: rgba(0,0,0,0) - 若 iframe 来自跨域，无法改其内部 CSS，则只能靠父页用
rgba()遮罩层模拟“背景透出”效果 - 注意：某些广告平台会强制注入白底 style，此时需用
!important覆盖（谨慎使用）
真正难的不是怎么写透明，而是透明之后底下内容会不会糊掉——比如深色文字叠在滚动图文上，或者广告图和页面背景色冲突。所有透明方案都得在真实设备上滚动预览，尤其留意文字可读性临界点。
