透明 Iframe 主体

Question

我需要一个具有动态宽度和高度的（跨域）iframe。

我的问题是，我可以创建一个 100% 大小和透明背景的 iframe，以显示该 iframe 的父级（位于其后面）吗？

我可以为 iframe 背景附加 css 属性或透明 gif 来实现这种效果吗？

谢谢。

Answer 1

是的，你可以（如果我正确理解你的问题）

这是代码如果您有 iframe 内容的编辑权限，请将其放在（iframe 的）头部

<style type="text/css">
 <!-- BODY {background:none transparent;}-->
 </style>

然后像这样嵌入iframe

<iframe src="frame.htm" allowtransparency="true">

Answer 2

通过检查 iframe 页面，您可能会发现页面的某些部分有颜色。我的建议是在添加透明度时从最高的组件开始：

html {
  background-color: transparent !important;
}

然后在 iframe 元素中：

<iframe src="www.." allowtransparency="true">

Answer 3

在现代浏览器中，问题在于颜色方案的元标记（参考：https://fvsch.com/transparent-iframes）

如果 iframe 的配色方案与嵌入文档不同，iframe 会获得适合其配色方案的不透明画布背景。

所以我解决这个问题的方法是在我的 iframe 中添加颜色方案元

<meta name="color-scheme" content="light dark">

Answer 4

这尚未经过测试，但 iframe（任何元素）应该具有透明的默认背景。

如果不是这样，你可以在CSS中将它们设置为透明

background: transparent

如果这不起作用，您可以使用 CSS 不透明度滤镜：
http://www.w3schools.com/Css/css_image_transparency.asp