透明背景 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

iframe 默认为透明

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

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

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