如何让iframe背景色透明

最新推荐文章于 2024-07-22 22:39:17 发布
最新推荐文章于 2024-07-22 22:39:17 发布
阅读量1.3w 收藏 4
点赞数 1
分类专栏： UI 文章标签： 如何让iframe背景色透明
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bestlove12345/article/details/51944473
版权

如何让iframe背景色透明

框架页文件设置：
<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 >

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


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


[html]  view plain  copy
  1. <iframe id="iframeRight" src="/111.html" scrolling="no" width="100%" height="100%" frameborder="0" allowTransparency="true"></iframe>  


111.html 如下：
[html]  view plain  copy
  1. <style>  
  2. body{  
  3. background-color:Transparent;  
  4. }  
  5. </style>  
  6. <div style="width:144px;height:557px;" id="divFloat1">  
  7.   <img src="/image/fd_4.png" usemap="#Map20" border="0" />  
  8. </div>     
HTML iframe设置背景透明
04-26
NULL 博文链接：https://onestopweb.iteye.com/blog/2356319
iframe背景透明的设置方法
10-26
本文收集各种关于解决iframe 背景透明设置方法与实例分析
解决Iframe无论怎么设置都无法透明的问题
斯幽柏雷科技
02-15 1109
事出反常必有妖,但这次着实我是没想到这么离谱…我怎么也没想到Iframe不透明居然是因为深色模式导致的…
iframe背景色透明
分享干货，拒绝水文
01-10 827
iframe背景色透明办法是设置iframe的属性 allowTransparency="true" 即如：以下是代码片段：而a.html的body也要设置样式 STYLE="background-color:transparent" 即如：以下是代码片段：这样iframe的背景就完全透明了。另外,在背景透明 iframe 里的样式设置背景颜色的话, a.html的透明背景颜色就会被iframe样
解决iframe IE8透明不兼容
weixin_33737134的博客
08-22 215
要使 ie8 的 iframe 的透明，需要设置两点：设置 iframe 的 allowTransparency 属性值为 true：<iframe allowtransparency="true" src="test1.html" width="200" height="126"></iframe>设置 iframe 里的页面的 body 的样式背景色为透明：<bo...
html 中 iframe 背景透明
iteye_7224的博客
08-01 152
父页面 &lt;iframe src="index.htm"  allowTransparency="true"&gt; &lt;/iframe&gt;     子页面 &lt;style type="text/css"&gt;body {     background-color: transparent; } &lt;/style&gt;...
设置Iframe透明
nevEr leAve
04-08 1041
设置Iframe透明　　Iframe还有一个更大的好处，就是可以设置框架透明，具体操作步骤如下：　　（1）在a.html里调用b.html,　　（2）在浏览器中浏览该页文件，发现在插入Iframe的区域将原来单元格的背景覆盖了，这不是想要的效果。　　（3）打开b.htm页面，切换到代码视图，在标记中插入代码如下：                    （4）将a.html页
java JFrame 设置背景颜色无效的理解
zhendongzd
05-04 5114
在开发Java应用程序时，通常情况下利用JFrame创建窗口。利用JFrame创建的窗口分别包含一个标题、最小化按钮、最大化按钮和关闭按钮
iframe transparent透明背景方法
10-30
然而在使用iframe时，可能会遇到需要让iframe背景透明的需求。通过设置iframe的透明背景，可以使得iframe内部的页面内容和样式与外部页面的布局和风格融为一体，这样的设计使得网页整体看起来更加整洁和专业。 在本...
iframe框架在IE浏览器下将白色背景设为透明色
09-28
这样，子页面的背景也会变为透明，使得`iframe`看起来没有背景色： ```html <!-- 子页面内容 --> ``` 结合上述两个步骤，`iframe`在IE浏览器下的白色背景就可以成功地变为透明。以下是一个完整的示例，包括主...
让iframe透明的参数
09-28
有时候，我们希望`iframe`的内容与父页面完美融合，使其背景颜色透明，从而实现继承父页面颜色的效果。标题和描述中提到的“让iframe透明的参数”就是指如何配置`iframe`以达到这种目的。这里我们将详细介绍如何通过...
iframe展示时空白背景色的解决方案
Java开发员
05-17 2934
点击按钮后 弹出一个iframe，然后背景色一片空白： 只要在iframe属性中加一个东西就可以搞定了： allowtransparency="true"
iframe 修改背景颜色后又变回去
wangzhen12138的博客
05-20 342
的背景颜色后又变回去，这可能是由于多种原因造成的。要解决此问题，您可以尝试上述方法，并逐步排除可能的原因，直到找到问题的根源。
关于在vue页面中设置iframe背景为透明
I_Allen_Liu的博客
07-22 395
在iframe标签中加入allowTransparency="true"如若不行，在浏览器中寻找上层样式，这里我的是要设置为半透明蓝色。在iframe引用的页面中加入。
如何实现Iframe透明
tangzehuan的专栏
12-12 1597
　　第一次发表文章，有什么写不好的地方请多多包涵，另外想借此机会认识一些从事WEB设计的朋友，tangzehuan@sohu.com  QQ 37878073　　IE5.5和NN6以上的浏览器支持　Frame　，Iframe对象的allowTransparency　方法，如果某对象的背景颜色设置为Transparency的，它将继承包含它容器的特性。我们可以通过这个特性实现透明背景的开／关。
html iframe 背景,iframe背景透明的设置方法
weixin_28881787的博客
06-24 1242
IE5.5开始支持浮动框架的内容透明。如果想要为浮动框架定义透明内容，则必须满足下列条件。1.与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true。2.在 iframe 内容源文档，background-color 或 body 元素的 bgColor 标签属性必须设置为 transparent当然前提是iframe页面中没有设置颜色.在上面我们主要是...
怎么(如何)使iframe无背景色！
weixin_33836874的博客
12-25 652
如果iframe套用原页面背景色是white，应用滤镜，可将套用iframe的背景色也应设为white。为：iframe写样式如下：style="filter: Chroma(Color=white);"我们就轻松的把iframe背景色去掉了 转载于:https://blog.51cto.com/opper/122353...
怎样让html iframe页面半透明
最新发布
09-20
如果你想让HTML中的`<iframe>`页面呈现半透明效果，通常需要通过CSS来实现。对于嵌入的内容（iframe），由于其内容由其他源控制，我们不能直接改变其样式。但是，你可以尝试以下几种方法来达到视觉上类似半透明的效果： 1. **设置父元素的背景**：给包含iframe的容器添加一个半透明的背景颜色，这样当iframe内容遮挡时，会显示这个背景。 ```css .parent-container { background-color: rgba(0, 0, 0, 0.5); /* 阴影部分的半透明度 */ } ``` 2. **调整`z-index`**：如果可能，你可以尝试增加iframe所在容器的`z-index`值，并降低iframe本身的`z-index`，使得在其之上添加的透明层覆盖在iframe上。 ```css .parent-container { position: relative; z-index: 1; /* 相对较高，使半透明层在上面 */ } .iframe-container { z-index: -1; /* 使其位于半透明层之下 */ } ``` 然后，在`.parent-container`内部添加一个绝对定位、半透明的`div`。 ```html <div class="parent-container"> <iframe class="iframe-container" src="..."></iframe> <div class="transparent-layer"></div> </div> ``` ```css .transparent-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0.5; /* 可视化半透明度 */ } ``` 注意，这种方法可能会因为浏览器差异导致效果不一致，尤其是对于跨域的iframe。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值