透明背景iframe仅在Firefox而不是Chrome或Safari工作

Question

我试图在 iframe 上获得透明背景，但我只能在 Firefox 上使用它。我已经尝试了所有不同的方法让它工作，但这是我现在在 iframe 中的页面上使用的 css：

html, body {
    background: linear-gradient(top, blue, transparent);
}

这是 Firefox 中的结果（以及所需的结果）：	这就是我进入 Safari 的 chrome：

我使用 JavaScript 添加的 iframe：

<iframe class='repoImg' allowtransparency='true' frameborder='0' src='objectpreview.html?objecturl="+ element +"' title='3D model of "+ element +"'>

有没有办法在所有浏览器上获得所需的结果？

Answer 1

iframes默认为透明

html, body {
    background: linear-gradient(#e66465, #9198e5);
    height: 100%;
}

<iframe src="data:text/html,<DOCTYPE html><h1>This is an iframe</h1>"></iframe>

如果iframe自己设置了背景颜色，则它将使用其选择的任何颜色。但是，如果它没有设置背景颜色，则它是透明的，并显示到父母的页面。

由于您得到的结果不同，因此iframe中的某些内容正在制作白色。