38

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

<iframe transparency=true   ...

当我进行 W3C 验证时,出现错误:

Column 31: there is no attribute "allowtransparency"

如果使用这个 CSS,

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

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

4

5 回答 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 和 Internet Explorer 8 上使用 Safari、Firefox 和 Chrome 以及在 Windows XP 上测试)

编辑:关键是:源页面不能设置自己的背景。如果是这样,它会忽略透明背景。

更新:刚刚在 macOS High Sierra 上使用 Safari 12、Chrome 73 和 Firefox 65 进行了测试(2019 年 3 月),它仍然有效。

于 2011-03-03T14:41:38.207 回答
14

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

iframe {
    background-color: transparent;
}

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

于 2010-09-18T07:52:57.370 回答
4

如果您已包含 jQuery 文件,则可以使用 jQuery 执行此操作 -

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

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

(此方法假定您已经拥有iframe {background-color:transparent}不适用于旧 IE 版本的方法)

于 2011-09-29T23:30:58.040 回答
1
  1. 没有名为 的 HTML 属性transparency,因此您总是会遇到错误iframe transparency=true

  2. 如果将不透明度设置为零,则根本看不到元素 - 您需要定义不透明度:

    opacity: 0.25; /* all modern browsers */
    filter: alpha(opacity=25) /* IE */
    

上面的 CSS(注意:对于 IE,opacity 值是 0-100,对于其他浏览器是 0-1)将允许后面的其他元素(例如页面背景图像)显示出来,即使具有 opacity 设置的元素具有彩色背景.

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

于 2010-09-18T08:34:26.920 回答
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 颜色定义与 opacity 属性一样工作(0 = 透明,1 = 纯色),除了它只使您设置的特定项目透明并且不影响该项目内的项目(即它不影响里面的文本你的 iframe)。前三个数字是颜色的红色、绿色和蓝色值,范围从 0 到 255。

但是,如果您想要一个更好的跨浏览器解决方案,我建议您只使用透明的 .png 文件作为背景图像。您必须在 IE 上对此进行测试,不确定它是否适用于 iframe,但您可以在 iframe 上不设置背景,然后将透明图像设置为您在 iframe 中加载的页面的背景(应用它到该页面的正文元素)。

希望这可以帮助!

于 2010-09-19T05:05:55.410 回答