如何让iframe背景色透明

最新推荐文章于 2025-06-24 23:43:49 发布

转载最新推荐文章于 2025-06-24 23:43:49 发布 · 1.4w 阅读

html与css 专栏收录该内容

24 篇文章

订阅专栏

本文探讨了如何在网页中实现透明背景效果，并详细介绍了使用iframe元素来达到这一目标的方法，包括透明背景的实现原理及不同方法的优劣对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

框架页文件设置：
<body style="background-color:transparent" > 或 <body bgColor="transparent">
方法一：
<iframe src="about.htm" width="100%" height="100%" align="center" scrolling="auto" frameborder="0" style="filter:chroma(color=#ffffff)" >
</iframe>
缺点：iFrame里的白色的都变透明了。
方法二：（个人推荐使用）
<iframe src="about.htm" width="100%" height="100%" align="center" scrolling="auto" frameborder="0" allowTransparency="true" >
</iframe>
还有其它几个写法，可以比较一下：
<iframe src="about.htm" allowTransparency="true" style="background-color: green"> </iframe >
<iframe src="about.htm"> </iframe >

经测试，<body style="background-color:transparent" > + allowTransparency="true" 有效

<iframe id="iframeRight" src="/111.html" scrolling="no" width="100%" height="100%" frameborder="0" allowTransparency="true"></iframe>

111.html 如下：

<style>
body{
background-color:Transparent;
}
</style>
<div style="width:144px;height:557px;" id="divFloat1">
  <img src="/image/fd_4.png" usemap="#Map20" border="0" />
</div>

参考页面：http://hi.baidu.com/lansesansan/item/4ad02f13bb02d9acfeded5a9