logo标签列表

没有属性名为"allowtransparency"。

htmlcssw3cw3c-validation
38

我正在寻找一些替代的方法来完成以下操作：

<iframe transparency=true   ...

当我进行W3C验证时，我遇到了以下错误：

Column 31: there is no attribute "allowtransparency"

如果使用这个CSS：

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

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

5个回答
37

虽然W3C的HTML规范没有定义它，但确实存在一个allowTransparency属性，并且所有现代浏览器（包括Internet Explorer）都支持它。正如HTML5所教给我们的，应该先有车再有马。

假设您在主页index.html上有以下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月），它仍然有效。
2
这个属性可能没有你想象的那么广泛地使用，你看过它是否在除了IE之外的浏览器上实际改变了行为吗？据我所知，这是一个IE特定的属性，其他浏览器默认允许iframe透明并忽略此属性。 - David Waters
请重新阅读我的回答。你的问题的答案已经在那里了。 - james.garriss
1
@james.garriss，我看了你的回答，你特别写道所有浏览器都支持该属性，而不是它的功能。非Internet Explorer浏览器的行为类似于Internet Explorer（8及以下版本，显然）的行为（当为其设置属性时），即使对于它们未设置属性也是如此。Chrome似乎不支持DOM属性。你认为它到底支持什么？ - PhistucK
1
我真的不明白你在问什么。你试过运行我提供的代码了吗？这段代码证明这些浏览器支持透明度（或者至少在3年前我测试时是这样的）。自己尝试一下这个代码吧。 - james.garriss
14

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

iframe {
    background-color: transparent;
}

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

4
如果您已经包含了jQuery文件，那么有一种方法可以使用jQuery来实现这一点 -
<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]-->

将.classname更改为您的iframe的名称，如果没有，则创建一个。在iframe结束标签之后紧接着放置它，并添加所需的allowTransparency标记以供IE9之前的浏览器使用。由于它位于IE条件语句中，因此W3C验证器不会读取它。如果您正在使用最新版本的jQuery，则它还消除了添加所有已经提到的CSS所带来的跨浏览器兼容性和内容隐藏问题。allowTransparency属性具有明确定义的目的，因此没有必要尝试使用CSS重新创建它，而可以直接插入它。希望这对某些人有所帮助！（此方法假定您已经有iframe {background-color:transparent}，但在旧版IE上无效）
+1 是因为你尝试提供了一个替代方法，这也是被要求的。不过我还没有真正尝试过它。 - Arne Evertsson
5
这里不需要使用jQuery。以下代码足以实现相同效果： document.getElementById("yourframeid").allowTransparency = true; - tomg
自我引用：“如果你已经安装了它”。我没有说你必须安装它才能做到这一点。如果你没有安装，那么我同意你的方法会更好。 - Joe H
1

  1. 没有名为transparency的HTML属性，因此您将始终在iframe transparency=true中收到错误。

  2. 如果将不透明度设置为零，则根本看不到该元素-您需要定义不透明度的程度：

    opacity: 0.25; /* 所有现代浏览器 */
filter: alpha(opacity=25) /* IE */
上述CSS（注意：IE的不透明度值为0-100，其他浏览器为0-1）将允许其他元素（例如页面背景图像）显示在后面，即使具有不透明度设置的元素具有彩色背景。
要更好地控制透明度，请参见RGBA（A = alpha），但要注意可变的浏览器支持。
在IE中，我的iframe变成了透明的，但问题是我也无法看到iframe内部的内容。 - Bharanikumar
你能放一个示例页面吗？如果 iframe 的内容完全不可见，那么我猜测（没有看到）要么是：它没有获取 iframe 内容，内容继承了另一个 CSS 设置，或者（显而易见，但值得检查）它的颜色属性与背景颜色相同。将其颜色设置为红色，并删除不透明度规则 - 它是否仍然无法显示？ - Dave Everitt
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元素）。

希望这有所帮助！

这是更改，根据您上面的示例，<style type="text/css"> /*.test-frame{ /opacity: 0.25; / 所有现代浏览器 */ /filter: alpha(opacity=20); / IE */ /opacity: 0.25; filter: alpha(opacity=0); }/ iframe.transparent { background-color: #000000; /这为不能使用RGBA颜色的浏览器（如Internet Explorer）提供了背景颜色/ background-color: rgba(0,0,0,0.5); }</style><body bgcolor="#000000"> <iframe class="test-frame" src="after-date.php"> 这是IFRAME区域</iframe>但仍未更新，在IE中我的IFRAME是白色的，但网站是黑色BG。 - Bharanikumar
你能分享一下你正在工作的页面链接，这样我就可以看整个代码了吗？ - Andrew
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接