Question

我正在创建一个网络/移动应用程序，我希望能够在页面2上显示page1的内容（第1页是HTML并包含文本按钮滑块，图像），其中opacity = .5，以便page1显示在page2的背景图像上。问题是如果我将page1的背景设置为透明，则不显示任何内容（page1本身看起来像白色白色，并且在第2页上显示时没有显示任何内容）。如果我设置page1 = black的背景，那么它的内容将显示在page2的背景上，但这会使page2的背景变暗50％。我还没有能够从iframe背景的其他SO页面中找到答案，其中有很多。

感谢您的帮助

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

Answer 1

你可以尝试这种方法：

首先在iframe中加载page1

然后声明一个div并将itrs药水设置为绝对高度和宽度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>

希望这有助于

透明iFrame：在基础页面的背景上显示文本/内容

1 个答案: