我有一小段代码尝试使用 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/