本文介绍如何设置iframe背景透明，使其与主页面背景融合。通过在iframe内页面设置body背景为透明，并在主页面中使用特定属性使iframe允许显示透明背景。
在编写页面的时候，用iframe可以方便编程。但有时候希望iframe能够和主页面融为一体，达到统一的背景效果。
现在才知道，原来iframe也可以透明。
只要在iframe中引用的页面里面有如下代码：
<HEAD>
<STYLE TYPE="text/css"> body{background-color:transparent}</STYLE>
</HEAD>
然后在主框架页面：
<HEAD>
<style>
body {background:beige url(background.jpg) no-repeat top center}
</style>
</HEAD>
<body>
<iframe name="iframe" src="page.html" width="100%" height="300" allowtransparency="true" scrolling="auto" align="center" frameborder="0"><iframe>
</body>
引用frame的时候，加上allowtransparency="true"属性，就可以了。
我试验了一下，效果很好。哈哈。
现在才知道，原来iframe也可以透明。
只要在iframe中引用的页面里面有如下代码：
<HEAD>
<STYLE TYPE="text/css"> body{background-color:transparent}</STYLE>
</HEAD>
然后在主框架页面：
<HEAD>
<style>
body {background:beige url(background.jpg) no-repeat top center}
</style>
</HEAD>
<body>
<iframe name="iframe" src="page.html" width="100%" height="300" allowtransparency="true" scrolling="auto" align="center" frameborder="0"><iframe>
</body>
引用frame的时候，加上allowtransparency="true"属性，就可以了。
我试验了一下，效果很好。哈哈。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
