编辑:改变标题实际上是正确的
我正在尝试在所有HTML和CSS中模拟一个模态弹出窗口,并且我正在运行我正在做的一个单一元素.我希望最里面的div,即内容的div,不像边框那样不透明,但无论我尝试使用CSS,我都无法让它工作.这是代码:
CSS
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
HTML
<table style="height: 100%; width: 100%; position: fixed; top: 0; left: 0;"><tr><td class="modalBackground">
<div style="display: table; height: 40px; width: 150px; position: fixed; overflow: hidden;
top: 40%; margin-top: -50px; left: 50%; margin-left: -75px; padding-left: 30px;
border: solid 1px navy; background-color: White;">
<div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
<div style="#position: relative; #top: -50%;"
><asp:Image runat="server" ImageUrl= "~/images/indicators/indicatordark.gif" /> working...</div>
</div>
</div></td></tr></table>
我在这方面达到了目的.无论如何我都不是HTML或CSS大师,因此非常感谢解释为什么解决方案有效.
小智 23
现在最好的方法是使用rGBA颜色.它不适用于旧版浏览器,但您可以通过为它们提供纯色来优雅地降低设计质量.例:
.parent {
background: gray; /* older browsers */
background: rgba(128,128,128,0.7); /* newer browsers */
}
.child {
background: blue;
}
这很烦人,但CSS不允许这样做.为一个元素设置不透明度意味着没有子元素可以具有任何更大的不透明度.(25%不透明度的100%是？对.)
因此,一种解决方案是使用微小的透明PNG作为重复背景图像来解决这个问题.唯一的问题是IE6,并且有一个很好的解决方案叫做supersleight.
(更新.认为超轻便适合你.)
更新 这是一个非常简单的测试用例.创建图像(例如,带有50%黑色填充的PNG),然后创建此文件 - 将它们保存在同一文件夹中.如果您没有看到"stuff"后面有透明背景的薄盒,那么您要么没有正确保存文件,要么已将图像保存在其他位置.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body { background:white; }
#overlay { background-image:url(test.png); }
</style>
</head>
<body>
<div id="overlay">stuff</div>
</body>
</html>