HTML:iframe 是透明的,iframe 内的表单元素可以在 Chrome 中编辑

标签 html css google-chrome iframe transparency

我有一小段代码尝试使用 HTML4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body>
<iframe marginwidth="0" marginheight="0" scrolling="yes" noresize frameborder="1" 
name="HEADER" src="1.html" style="position:absolute; top:0; left:0; width:100%; height:100%;
z-index:3 ;" ALLOWTRANSPARENCY="true">
</iframe>
<iframe id="ifrm_contract" marginwidth="0" marginheight="0" scrolling="yes" frameborder="1"
name="CONTRACT" src="2.html" style="position:absolute;top:211;left:0;width:100%;height:30%;
z-index:2;"  ALLOWTRANSPARENCY="true">
</iframe>
<iframe marginwidth="0" marginheight="0" scrolling="yes" frameborder="1" noresize
name="CONTENT" src="3.html" style="position:absolute;top:356;left:0;width:100%; height:50%;
z-index:1;" ALLOWTRANSPARENCY="true">
</iframe>
</body>
</html>

1.html 和 3.html 是具有静态内容的简单 html 文件。 但是 2.html 在 html 文件的中心有一个按钮。 以下是我的观察。

A>在 IE 8 中,代码工作正常。2.html 中的按钮是可编辑的(意味着用户可以单击它)。同样在 IE 8 中,'allowtransparency' 属性工作正常。

B>在 Chrome/Safari 中,'allowtransparency 属性不起作用。但是在 chrome 2.html 和 3.html 中默认情况下是透明的,尽管它们有 z-index 属性 .
'但我的问题是 2.html 中的按钮不可编辑或用户无法单击它。它即将被禁用。'

注意:根据我的要求,我必须使用 height=100% 将 1.html 的高度保持为 100%。

请提出任何 CSS 解决方案来纠正此问题。

也加入2.html的代码片段

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <body STYLE="background:transparent"> <!--Here Some static text content--> <center><input type="button" value="click" /><center/><br/> <!--Here Some static text content--> </body> </html>

最佳答案

可以为 iframe 使用 css,比如...

iframe { 不透明度:0.4; 过滤器:alpha(不透明度=40);/* 对于 IE8 及更早版本 */ }

不透明度可以取 0.0 - 1.0 之间的值

关于HTML:iframe 是透明的,iframe 内的表单元素可以在 Chrome 中编辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26119538/

相关文章:

javascript - 如何将 ID 值添加到 div 追加

html - 当第一个卡头有断字而第二个卡头没有时如何对齐 bootstrap-4 卡

Python Selenium WebDriverException : chrome not reachable while opening ChromeDriver

google-chrome - 确定哪个资源导致 Chrome 中出现 SSL 警告

html - 圈出彼此相邻的 DIV 元素

javascript - jQuery fadeIn(), fadeOut() 导致性能急剧下降

jquery - div 上下移动

html - 图像变暗并缩放文本

css - 为什么要在 CSS 中引入 margin collapse 规则?

javascript - Google Maps JS APi v3 融合表层在 Chrome 中不起作用