HTML iframe设置背景透明

最新推荐文章于 2022-07-15 10:47:56 发布

最新推荐文章于 2022-07-15 10:47:56 发布 · 1.4k 阅读

文章标签：

#iframe设置背景透明 #HTML嵌入框架背景透明 #设置背景透明

境-HTML 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何使iframe背景透明，以适应具有特定背景的页面。通过调整iframe的样式属性，并为不同浏览器提供兼容方案，确保在多种环境下都能实现背景透明的效果。

要嵌入的框架：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
	 width: 800px;
	 height: 600px;
	 background: #f60;
}
</style>
</head>
<!--
	正常情况下iframe的背景色是白色
	当框架页面有一个大的背景图或背景色时
	iframe区域并不能继承框架页面的背景
	这就需要让iframe背景色透明
	<body style=" background-color:transparent;">
-->
<body style=" background-color:transparent;">
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
</body>
</html>

演示的页面：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: url(bg.jpg);">
	<!--
    	设置IE下的iframe背景透明 allowTransparency="true"
    -->
	<iframe src="box.html" width="800" height="600" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</body>
</html>

PS：兼容IE6+，火狐，谷歌，欧朋

效果图：