Question

我有一个包含iframe的页面：

<div style="position:absolute; width:80%; top:100px; left:10%; z-index:5;">
    <iframe src="www.google.com" />
</div>

请注意，iframe的来源可以来自其他域，因此我无法更改其中的html。

除了这个ifame，我还有一个菜单和底部的装饰图片：

<div id="menu" style="position:absolute; width:100%; top:0px; left:0px; z-index:100;">
    ...
</div>

<div id="footer" style="position:absolute; width:100%; bottom:0px; left:0px; z-index:0;">
    ...
</div>

正如你所看到的，我为每个div提供了z-index，所以它应该按照这个顺序显示：顶部的菜单，后面是iframe的div，页面底部的图像。

我想要的是iframe（和div保持它）没有背景（如果你喜欢透明的bg颜色），所以它后面的背景和页脚图像将是可见的。请注意，我只想更改背景颜色;文字不得改变或不透明。

我设法进入bg图像并更改它（使用jquery）：

if ($.browser.msie == false) {
    $(document.getElementById("content").contentDocument.body).
                        css('background', "url('transparent.png')");
}
else {
    $(document.getElementById("content").Document.body).
                        css('background', "url('transparent.png')");
}

它在iframe上运行greate，但是以某种方式保存它的div会获得白色背景。

如果我将div的背景设置为'transparent.png'图像，它将不会改变; div仍将保存其白色背景！

如果我用表替换div，iframe会在页脚图像后面（虽然它的z-index更大）。

我只想看看那个iframe背后的页脚图片......

请帮忙，我很无望...... :(

Answer 1

尝试：

background: transparent url('transparent.png');

有一点需要注意，IE6不支持PNG的Alpha透明度。你想要一个IE特定的样式表，并且只使用IE浏览器。

为了澄清，你不是要试图摆脱iframe本身的背景颜色，而只是能够看到页脚和标题是否正确？如果是这种情况，则应使用HTML4.01 doctype。

<div style="position:absolute; width:80%; top:100px; left:10%; z-index:5;">
    <iframe style="background-color: transparent;" src="testframe.html" allowtransparency="true"></iframe>
</div>

Answer 2

我测试了这个并且无法复制问题。这是我的主要HTML：

<div style="background:red;">
<div>
    <iframe src="test2.html" />
</div>
</div>

这是test2.html：

this is a test file

这会在iframe后面的红色背景的iframe中显示“这是一个测试文件”。你能发布一些代码来澄清你的问题吗？

Answer 3

你是否尝试过div的透明背景和iframe的半透明背景图片？

Answer 4

CSS：

<style>
    .hid 
    {
        filter: alpha(opacity=70);
        opacity: 0.7;
        -moz-opacity: 0.7; 
    }
</style>

HTML：

<iframe class="hid"></iframe>

这样就可以了。我在IE6上尝试过，它在那里工作。

在有iframe的情况下划分透明背景？

4 个答案: