没有属性“allowtransparency”

问题描述 投票:34回答:5

我正在寻找一些替代方法:

<iframe transparency=true   ...

当我进行W3C验证时,我收到错误:

Column 31: there is no attribute "allowtransparency"

如果使用这个CSS,

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

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

html css w3c w3c-validation
5个回答
32
投票

虽然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月),它仍然有效。


13
投票

我不确定你在这里要做什么,但这应该是你正在寻找的:

iframe {
    background-color: transparent;
}

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


4
投票

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

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

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

(此方法假设您已经拥有iframe {background-color:transparent},这对旧的IE版本不起作用)


1
投票

首先,没有'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元素)。

希望这可以帮助!


1
投票
  1. 没有名为transparency的HTML属性,因此您将始终使用iframe transparency=true收到错误
  2. 如果将不透明度设置为零,则根本不会看到该元素 - 您需要定义不透明度: opacity: 0.25; /* all modern browsers */ filter: alpha(opacity=25) /* IE */

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

有关透明度的更多控制,请参阅RGBA (A = alpha),但请注意可变浏览器支持。

© www.soinside.com 2019 - 2024. All rights reserved.