透明的 iframe 主体

Question

我需要一个动态宽高的跨域iframe。

我的问题是， 我能否创建一个100%大小和透明背景的iframe，使其后面显示此iframe的父级元素？

我能在iframe背景上附加CSS属性或透明GIF以实现这种效果吗？

谢谢。

- user345311

---

接受atomicdude的答案。 - JD.

Answer 1

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

以下是代码： 如果您可以编辑iframe内容，请将以下内容放入iframe的头部。

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

然后像这样嵌入iframe

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

- Atom Vayalinkal

---

仍然有用的信息。谢谢。 - bergie3000

谢谢！很高兴我能帮忙，但如果您能点个赞就更好了。反正我还太年轻，不能喝啤酒哈哈。 - Atom Vayalinkal

请注意，透明的 iframe 不会将点击事件传递给父窗口，因此用户可能会对页面上可见但无法点击的元素感到困惑。 - Jon z

哦，我不知道点击事件不能穿透。谢谢你提供的信息！ - Atom Vayalinkal

谢谢！你的答案应该会被接受！虽然这似乎可以在没有 allowtransparency="true" 的情况下工作。你为什么要包含这个部分呢？ - Crashalot

Answer 2

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

最初的回答:

You can check the color of certain parts on the page by inspecting the iframe. To add transparency, it is recommended to start from the highest component.

html {
  background-color: transparent !important;
}

最初的回答

接着在 iframe 元素中：

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

- Patrik Rikama-Hinnenberg

---

似乎不需要 allowtransparency="true" 也能正常工作。你为什么要包含这部分？谢谢帮忙！ - Crashalot

Answer 3

虽然这没有经过测试，但是 iframe (任何元素) 应该默认具有透明背景。

如果不是这样的话，您可以在 CSS 中将它们设置为透明 background: transparent

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

- Kerry Jones