广告背景透明应使用rgba()设置background-color的alpha值，避免用opacity导致文字发虚；带背景图的广告需用::before伪元素隔离并单独设opacity；iframe广告需内外同时设透明。

广告背景必须透明，但文字、按钮、图标不能变淡——直接用 opacity 就会连广告文案一起发虚，这是最常踩的坑。

用 background-color: rgba() 只透背景，不透内容

这是最稳妥、兼容性最好、也最容易控制的方式。广告容器（比如

）只改背景色的 alpha 值，其余一切照常。

• 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 内部文档也配合清空背景。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 父页面 iframe 标签加 style="background: transparent"
• iframe 所加载的 HTML 文件里，body 和外层容器都要设 background: transparent 或 background-color: rgba(0,0,0,0)
• 若 iframe 来自跨域，无法改其内部 CSS，则只能靠父页用 rgba() 遮罩层模拟“背景透出”效果
• 注意：某些广告平台会强制注入白底 style，此时需用 !important 覆盖（谨慎使用）

真正难的不是怎么写透明，而是透明之后底下内容会不会糊掉——比如深色文字叠在滚动图文上，或者广告图和页面背景色冲突。所有透明方案都得在真实设备上滚动预览，尤其留意文字可读性临界点。

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