Question

我正在寻找其他方法：

<iframe transparency=true   ...

当我进行W3C验证时，我收到错误：

Column 31: there is no attribute "allowtransparency"

如果使用此CSS，

.iframe-trans-fix{
   opacity: 0;
   filter:alpha(opacity=0);
}

对于上面的代码段我得到一个空白的iframe。

Answer 1

虽然W3C的HTML规范确实没有定义它，但是有一个allowTransparency属性，所有现代浏览器（和Internet Explorer）都支持它。正如HTML5告诉我们的那样，推车应该在马前。

假设您的主页上有这个HTML，index.html：

<html>
    <body>
        <iframe src="source.html" 
                allowTransparency="true" 
                style="background-color:lightgreen;" 
                width="400" height="200">
        </iframe>
    </body>
</html>

你的source.html看起来像这样：

<html>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna
           id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris 
           augue et dui. </p>
    </body>
</html>

当您在浏览器中打开主页面（index.html）时，您将在iframe中看到来自source.html的文本，但它将具有浅绿色背景。

（在Mac OS X上使用Safari，Firefox和Chrome进行测试，在Windows XP上使用Internet Explorer 8和Chrome进行测试）

编辑：关键是：源页面无法设置自己的背景。如果是，则忽略透明背景。

更新：刚刚在macOS High Sierra上使用Safari 12，Chrome 73和Firefox 65进行了测试（2019年3月），它仍然有效。

Answer 2

我不确定你在这里要做什么，但这应该是你想要的：

iframe {
    background-color: transparent;
}

当然，这是假设您希望iframe的背景是透明的。

Answer 3

如果你已经包含了jQuery文件，有一种方法可以用jQuery做到这一点 -

<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]-->

将.classname更改为iframe的类别，或者如果没有iframe，请创建一个.classname。（也从iframe中取出属性）在iframe结束标记之后直接放置它，并为IE9之前的浏览器添加所需的allowTransparency标记。因为它在IE条件语句中，所以W3C验证器不会读取它。如果你正在使用最新的jQuery版本，它还可以通过添加人们已经提到的所有CSS来消除跨浏览器兼容性和内容隐藏问题。 allowTransparency属性是使用明确定义的目的创建的，因此当您可以静默插入时，尝试使用CSS重新创建它是没有意义的。希望这有助于某人！

（此方法假设您已经拥有iframe {background-color:transparent}，这对旧的IE版本无效）

Answer 4

没有名为transparency的HTML属性，因此总是错误iframe transparency=true
如果将不透明度设置为零，则根本不会看到该元素 - 您需要定义不透明度：
```
opacity: 0.25; /* all modern browsers */
filter: alpha(opacity=25) /* IE */
```

上面的CSS（注意：IE的不透明度值为0-100，其他浏览器为0-1）将允许显示其他元素（例如页面背景图像），即使具有不透明度设置的元素具有彩色背景。

要更好地控制透明度，请参阅RGBA (A = alpha)，但请注意可变浏览器支持。

Answer 5

首先，没有'transparency =“true”'这样的东西，所以这不起作用。

其次，您是尝试使背景透明还是整个iframe透明？

CSS Opacity属性使您在透明上使用它的任何元素内的所有内容。不透明度从0到1缩放，其中0表示完全透明，0.5表示透明，1表示完全可见。

如果你在div或iframe（或任何东西）上使用它，背景和文字都会同样褪色。

另一方面，在每个现代浏览器中，您都可以使用RGBA颜色将背景设置为部分透明。你应该这样做：

iframe.transparent {
    background-color: #FFF; /*this gives a background color for browsers that can't do RGBA color, like internet explorer*/
    background-color: rgba(255,255,255,0.5);
}

RGBA颜色定义的工作方式与不透明度属性（0 =透明，1 =实体）的效果相同，只是它使您设置的特定项目透明且不影响该项目内的项目（即它不会影响iframe中的文字）。前三个数字是您的颜色的红色，绿色和蓝色值，范围从0到255。

如果您想要更好的跨浏览器解决方案，我建议您只使用透明的.png文件作为背景图片。你必须在IE上测试这个，不确定它是否适用于iframe，但你可以在iframe上没有设置背景，然后将透明图像设置为你在iframe中加载的页面的背景（应用它）到该页面的body元素。）

希望这有帮助！

没有属性“allowtransparency”

5 个答案: