透明 iFrame：在底层页面的背景上显示文本/内容答案

【问题标题】：Transparent iFrame: shows text/content on the underlying page's background透明 iFrame：在底层页面的背景上显示文本/内容
【发布时间】：2014-08-19 19:06:11
【问题描述】：

我正在创建一个网络/移动应用程序，我希望能够在不透明度 = .5 的 page2 上显示 page1 的内容（page1 是 HTML 并包含文本按钮滑块、图像），以便page1 显示在 page2 的背景图像上。问题是，如果我将 page1 的背景设置为透明，则不会显示任何内容（page1 本身看起来像白底白字，而在 page2 上显示时什么也不显示）。如果我将 page1 的背景设置为黑色，那么它的内容会显示在 page2 的背景上，但这会使 page2 的背景变暗 50%。我无法从 iframe 背景上的其他 SO 页面中弄清楚这一点，其中有很多。

感谢您的帮助

仅供参考，这是一种将 iframe 内容放入 Famo.us 前端的方法，该前端可以使用 JS 为 page1 所在的 iframe 设置表面的不透明度。

【问题讨论】：

您是否尝试将 allowTransparency="true" 添加到 iframe？
不幸的是，尝试了这个但没有用。
你的意思是这样的吗？ jsfiddle.net/ach6mrj3/1
感谢 fgshepard，这太完美了。

标签： css html iframe

【解决方案1】：

你可以试试这个方法：

首先在 iframe 中加载 page1

然后声明一个 div 并将其设置为绝对高度和宽度 100% 和背景 rgba(0,0,0,.1)

在这个 div 里面放你的页面两个内容。

    <!DOCTYPE HTML>
    <html >
    <body>
        <iframe src="http://somesource" ></iframe>
        <div id="box">
            <h2>page 2 contents goes here ...</h2>
        </div>
        <style >
            #box{
                position:absolute;
                width:100%;
                height:100%;
                top:0; left:0;
                background:rgba(0,0,0,.1);
            }
        </style>
    </body>
    </html>

希望对您有所帮助

【讨论】：