iframe中背景图片设为no-repeat引发的异常

最新推荐文章于 2022-09-18 21:14:36 发布
最新推荐文章于 2022-09-18 21:14:36 发布 · 324 阅读 · 0
文章标签：

#HTML

本文探讨了在页面中嵌入IFRAME时，当BODY设置了背景图片并使用background-repeat属性时可能出现的内容残留覆盖问题，并提供了几种解决方案。

问题：

页面中嵌入一个IFRAME的弹出层效果，docType为xhtml1-transitional，此时若为BODY设置了背景图片，且设置了background-repeat属性，在使用滚动条的情况下将出现显示异常，内容会出现残留覆盖。如下图所示：

 

原因：

未知...

解决办法：

  1. 去掉网页的DOCTYPE属性
  2. 不使用background-repeat属性
  3. 将背景样式设置到html对象上（滚动条好像也必须要这样）  --- 本人认为最优方案
php杂谈【基础篇】之_7.PHP涉及的所有英文单词
u011513939的博客
07-03 2778
php杂谈【基础篇】之_7.PHP涉及的所有英文单词拦路虎 PHP再火，也会让一部同学心生畏惧，因为看到编辑器中那一串串英文单词，担心自己英文不好，从而对能学会PHP的决心产生动摇。其实大可不必，英文在学习PHP过程中真的连级别都够不上，毕竟咱们义务教育阶段都接触过英文，毕竟我们现在有智能手机，随时可以查单词。为了更方便零基础同学克服对英文的恐惧，传智播客PHP学科各阶段讲师联袂整理自己
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
IE设置iframe背景图片透明
weixin_34415923的博客
10-08 159
ALLOWTRANSPARENCY="true" javascript是大小写敏感的，html是不敏感的。html中onclick和onClick都可以。 转载于:https://www.cnblogs.com/davin-dai/archive/2011/10/08/2203017.html...
iframe背景图片 的设置（css 与style）
大富豪的雨伞黎儿的博客
02-18 3579
iframe背景图片 的设置（css 与style） <iframe scrolling="auto" allowtransparency="true" name="main" style="width:100%;height:100%;background-image:url(../Content/images/pFlow.png)"> </iframe> background-repeat: no-repeat; background-attachment: fixed;
使iframe里面引用页透明，显示主页面的背景图片
0.0 空间
07-28 1159
 main.htm         ALLOWTRANSPARENCY="true" >             iframe.htm           STYLE="background-color:transparent">       Transparent.            
如何防止网页的背景图片重复 no-repeat
飞雪的博客
04-21 1万+
（1）现在一般都用css设定了，比如在一个div下设背景图片切不让其重复，则可设一个样式，比如： .nobgrepeat{background:url(背景图片地址) left top no-repeat;} （2）也可以设置背景图片的高宽，要与背景图片的大小一样 注意：但是有时候加了 no-repeate之后，图片就会不见了，这种情况与设置的 left
java设置图片_JAVA 设置背景图片
weixin_34790851的博客
02-20 261
关键就就是这几句话ImageIcon image = new ImageIcon(Main.class.getResource("back.png"));Image ii=image.getImage();g.drawImage(ii, 0,0, this.getWidth(), this.getHeight(), null);package open.ui;import java.awt.Col...
Web前端技术个人学习经验总结
智慧城市大脑
04-23 3682
目录：    1.2017-12-24（第一天Web项目）：    2.2017-12-25（第二天表格）：    3.2017-12-25（第二天框架及表单）：    4.2017-12-26（第三天CSS语言）：    5.2017-12-28（DIV+CSS）：    6.2017-12-29（JavaScript）:    7.jQuery:    8.表单验证+正则表达式+BootStr...
5.14面试复盘
qq_41537989的博客
05-20 1260
5.14面试复盘 5.14上午前端开发面试 笔试题 1.写出一种你最熟悉的排序算法 十大经典算法排序总结对比 名词解释： n: 数据规模 k:“桶”的个数 In-place: 占用常数内存，不占用额外内存 Out-place: 占用额外内存 稳定性：排序后2个相等键值的顺序和排序之前它们的顺序相同 冒泡排序（Bubble Sort） 冒泡排序算法的原理如下： 1.比较相邻的元素。如果第一个比第二个大，就交换他们两个。 2.对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该
html语言怎么让背景图片不重复,css怎么设置背景图片不重复？
weixin_33134753的博客
05-31 4728
在使用css添加背景图片时，默认的样式是图片重复；但有时页面只需要一个不重复的大背景图片，那么如何让背景图片不重复？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。在CSS中，可以使用background-repeat属性来设置背景图片不重复。background-repeat属性用于设置背景图片的重复方式，将background-repeat属性值设为no-repeat即为背景图片不重复。b...
HTML iframe设置背景透明
04-26
NULL 博文链接：https://onestopweb.iteye.com/blog/2356319
Iframe中使用JS事先切换背景颜色、背景图片的效果
avgk01030117的博客
10-18 370
项目文件中使用了好多的Ifarme，刚开始以为是根本就没办法实现，因为本身对Javascript不是很熟悉，所以好像花了好多的时间，先记录下，以备下次用到方便查找！1、更改Body的颜色、背景图片<a href="#" onclick="top.document.body.style.background='yellow'">测试</a><a href="#...
html 背景图片不重复显示,css如何设置背景图片不重复？
weixin_35577004的博客
06-04 3285
css设置背景图片，默认的样式是图片重复，有的时候页面只需要一个不重复的背景图片，这就需要使用到css背景图片重复属性background-repeat: no-repeat;进行设置。css使用background-repeat设置背景图片不重复和不使用background-repeat属性对比。示例：不设置background-repeat属性body{background-image:url...
html怎么加背景图片不重复,css怎么设置背景图片不重复？
weixin_31207903的博客
06-04 5212
在使用css添加背景图片时，默认的样式是图片重复；但有时页面只需要一个不重复的大背景图片，那么如何让背景图片不重复？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。在CSS中，可以使用background-repeat属性来设置背景图片不重复。background-repeat属性用于设置背景图片的重复方式，将background-repeat属性值设为no-repeat即为背景图片不重复。b...
iframe背景透明问题
xwygn的专栏
10-19 556
iframe的透明背景 　在transparentBody.htm文件的标签中，我已经加入了style="background-color=transparent" 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解：
CSS中背景图片的属性：background-repeat、background-position、background-size
xuehyunyu的博客
05-26 2万+
背景图片的各种属性： 1、background-repeat：设置图片平铺方式。有三个属性：no-repeat（图片保留自身大小不平铺）、repeat-x（图片在水平方向上平铺）、repeat-y（图片在垂直方向上平铺） 2、background-position：确定图片显示的位置。 background-position: 30px 50px;   图片在水平方向上向右偏移30px，在垂
css学习笔记
xiatian_sun的博客
07-15 2247
CSS CSS 派生选择器 li strong {     font-style: italic;     font-weight: normal;   } 请注意标记为 的蓝色代码的上下文关系： 我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用
CSS里的 no-repeat 是什么意思
IT枫斗者的博客
09-18 7958
CSS 里的 no-repeat是针对背景图来说的。当你设置了no-repeat这个属性后，你的背景图将不会被重复，再换一种说法，你在网站上所看见的背景图就是你所增加的图， 不会出现平铺或重复的现象。当然你仍然可以通过其他方式来 控制图 的位置，例如： {backgroud:top, center, no-repeat;} 这样你的背景图就位于上部的居中位置。
CSS中设置背景的7个属性及简写background注意点
王春燕的博客
04-13 1万+
css中背景的设置至关重要，也是一个难点，因为属性众多，对应的属性值也比较多，这里详细的列举了背景相关的7个属性及对应的属性值，并附上演示代码，后期要用的话，可以随时查看，那我们坐稳开车了······ 1: background-color 设置背景颜色 2:background-image来设置背景图片 - 语法：background-image:url(相对路径); -可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色，一般情况下设置背景...
el-dialog中如何设置iframe内部背景颜色
06-13
如果您想在el-dialog中嵌入一个iframe并设置iframe内部的背景颜色，可以使用以下代码： ```html <el-dialog title="Dialog Title" :visible.sync="dialogVisible" width="50%"> <iframe src="your_url" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值