iframe的background: transparent无效，因为该样式仅作用于加载前空白区或失败占位背景，子页面渲染后其body会完全覆盖；真正起效的是子页面设置body { background: transparent; margin: 0; padding: 0; }，且allowtransparency属性已被现代浏览器废弃。
iframe background: transparent 为什么没用
因为 iframe 元素自身的 background 样式（比如 background: transparent 或 background: rgba(0,0,0,0)）只影响加载前的空白区域、加载失败时的占位背景，或子页面未完全渲染时的“缝隙”。一旦子页面完成渲染，它的 就会完全覆盖这个区域——你看到的永远是子页面的背景，不是 iframe 的。
真正起作用的是子页面的 body { background: transparent }
现代浏览器（Chrome/Firefox/Edge/Safari）完全忽略 allowtransparency 属性，它早在 2015 年前后就被各大引擎静默废弃。唯一可靠路径是子页面主动清除自身背景：
body { background: transparent; margin: 0; padding: 0; }- 如果子页面用了
html { background: #fff }，也得一并设为transparent - 检查 CSS Reset / Normalize 是否重置了
body背景——用 DevTools 的 Computed 面板确认最终计算值 - 避免子页面存在
position: fixed; top: 0; width: 100%; height: 100%且带背景色的全屏遮罩层
父页面 iframe 标签该写什么样式
父页面能做的很有限，但以下几项必须写清楚，否则容易出视觉异常：
- 去掉默认边框：
border: none - 清空外边距和内边距：
margin: 0; padding: 0 - 可选加
background: transparent，只为避免加载瞬间闪白（不解决透明本质） - 必须显式设置
width和height，否则某些浏览器可能不触发正常渲染流程 - 别用过时的
frameborder="0"或scrolling="no"，全部改用 CSS 控制
正确写法示例：
<iframe src="child.html" style="border: none; margin: 0; padding: 0; background: transparent; width: 100%; height: 400px;"></iframe>
跨域 iframe 无法设置透明怎么办
如果你嵌的是第三方页面（比如 src="https://maps.google.com/embed"），而对方没设 body { background: transparent }，那你完全无权通过 JS 或 CSS 修改其内部样式——这是同源策略的硬性限制，任何 hack 都无效。
此时只能放弃 iframe 透明方案，改用：
- 官方提供的 embed API（如 Google Maps Embed API 支持自定义背景）
- 服务端代理 + 同源注入样式（需后端配合，且注意 CSP 和法律风险）
- 前端渲染替代方案（如用 iframe 的
contentWindow通信 + 把关键内容抽出来重绘）
最常被忽略的一点：透明不是“让 iframe 变透明”，而是“让子页面主动放弃遮挡”。只要子页没配合，父页所有样式和属性都是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
