标签中,我已经加入了style="background-color=transparent" 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解" />
你好,欢迎访问我的博客!登录
当前位置:首页 - 教程 - 正文 君子好学,自强不息!

实用iframe 透明的设置方法教程

2018-06-13 22:04:46教程admin26°c
A+ A-
文章目录
目录

要嵌入的框架:

<!DOCTYPE html> <html> <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>

iframe 透明演示的页面:

<!DOCTYPE html> <html> <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+,火狐,谷歌,欧朋

">iframe 透明效果图:

 

iframe 透明框架页文件设置:

<body style="background-color:transparent" > 或 <body bgColor="transparent">

iframe 透明方法一:

<iframe src="about.htm" width="100%" height="100%" align="center" scrolling="auto" frameborder="0" style="filter:chroma(color=#ffffff)" >

</iframe>

缺点: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 >

<iframe src="about.htm" style="background-color: green"> </iframe >

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
实用iframe 透明的设置方法教程

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录