iframe 透明需子页面主动设 body { background: transparent; margin: 0; padding: 0; }，父页面设置无效；allowtransparency 已废弃，现代浏览器仅认子页样式。

iframe 默认背景是不透明的，即使父页面设置了 background: transparent，iframe 内容仍会覆盖并遮挡底层；真正让 iframe “透出” 底层的关键，不是 HTML 颜色代码，而是 allowtransparency 属性（已废弃）+ background: transparent 的组合 + 子页面主动清空自身背景 —— 且现代浏览器只认后者。

iframe 元素本身不能靠颜色代码变透明

你写 没用。iframe 元素的 background 样式只影响 iframe 的“边框内空白区域”，一旦子页面加载完成，它的 body 就会完全盖住这个区域。真正决定是否透出的，是子页面 的背景。

• rgba(0,0,0,0)、transparent 这些颜色值对 iframe 元素本身几乎无视觉效果
• 旧版 IE 曾支持 allowtransparency="true" 属性，但 Chrome/Firefox/Edge 已彻底忽略它
• 目前唯一可靠路径：子页面必须显式设 body { background: transparent; }

子页面必须主动清除背景色和默认 margin

哪怕父页面 iframe 设置了 style="background: transparent"，只要子页面 有默认白色背景或 margin，就会挡住底层。必须在子页面 HTML 中确保：

body {
  background: transparent;
  margin: 0;
  padding: 0;
}

• 仅设 background: transparent 不够，margin: 8px（浏览器默认）会露出一圈白边
• 如果子页面用了 CSS reset 或 normalize.css，检查是否重置了 body 的 background
• 若子页面是第三方不可控（如嵌入广告、地图），无法修改其 body 样式，则 iframe 透明不可行

父页面 iframe 标签需配合基础样式

虽然 iframe 元素背景不可见，但仍有几个必要样式能避免意外遮挡或渲染异常：

• 加 style="border: none; background: transparent;" 消除边框和可能的 fallback 背景
• 务必设置 width 和 height，否则部分浏览器可能不触发透明渲染流程
• 避免用 frameborder="0"（过时属性），改用 CSS border: none
• 若父页面用了 opacity 或 mix-blend-mode，可能干扰透明表现，优先用 background: transparent 方案

常见错误：误以为 CSS 颜色代码能穿透 iframe

有人尝试用 background: #00000000 或 background: hsla(0,0%,0%,0) 给 iframe 设背景，这不会让子内容变透明。这些值只作用于 iframe 元素自身的“未被子文档占据的区域”——而该区域在子页加载后通常为零。

• #00000000 是合法的 8 位十六进制透明黑，但它只对 iframe 元素生效，不影响子页面
• 调试时可临时给 iframe 加 style="background: red;" 看是否真有“空白区”露出来，再判断是不是子页面没清背景
• 移动端 Safari 对 iframe 透明支持更严格，务必测试真实设备

核心就一条：iframe 透明不是靠父页面“设个颜色”，而是子页面亲手把 body 的 background 和 margin 彻底归零。任何绕过这点的方案，在现代浏览器里都只是碰巧或失效。