Question

我有iframe来代表下拉菜单。问题是，当显示iframe时，我可以看到父页面中的内容。

有没有办法让iframe透明化？

jQuery('<iframe id="accountframe" style="position: absolute; width: 290px; height:     140px;  margin-top: 0px;  margin-left: 0px; top:0px; left:0px; text-align:left overflow:hidden; allowTransparency:false"  src="test.jsp" ></iframe>').appendTo('#account');

我正在使用jQuery动态添加/删除iframe。我已经尝试过allowTransparency：false作为样式表，并且还允许使用TransTransparency =“false”作为属性，但两种方式都不起作用。

感谢。

Answer 1

allowTransparency="true"怎么样？既然做希望它透明吗？

在iframe上设置background-color:transparent也是有帮助的，并确保加载到iframe中的页面没有在其正文中定义背景颜色。

Answer 2

您的代码中存在一些错误： allowTransparency不是CSS属性。 allowtransparency是iframe元素的属性。并且您将allowTransparency写为CSS属性。

尝试使用此代码 -

jQuery('<iframe id="accountframe" style="position: absolute; width: 290px; height:140px; margin-top: 0px; margin-left: 0px; top:0px; left:0px; text-align:left overflow:hidden;" allowTransparency="false" src="test.jsp" ></iframe>').appendTo('#account');

There is article for this

正如您所提到的，您还尝试allowTransparency="false"作为属性，但是如果您想让IFrame透明化。您需要在Iframe上设置allowTransparency="true"。

确保IFRAME及其来源BODY元素都应用了background:transparent样式规则：

<iframe frameborder="0" allowTransparency="true" style="background:transparent" ... ></iframe>

并在来源：

<body style="background:transparent">

PS：上面的CSS样式仅仅是内联的。

试试这个：

jQuery('<iframe id="accountframe" style="position: absolute; width: 290px; height:140px; margin-top: 0px; margin-left: 0px; top:0px; left:0px; text-align:left overflow:hidden;" allowTransparency="true" src="test.jsp" ></iframe>').appendTo('#account');

iframe透明度问题

2 个答案: