Question

编辑：将标题更改为实际正确

我正在尝试在所有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大师，因此非常感谢解释为什么解决方案有效。

Answer 1

更新后的答案

现在最好的方法是使用rGBA颜色。它不适用于旧版浏览器，但您可以通过为它们提供纯色来优雅地降低设计质量。例如：

CSS

.parent {
    background: gray; /* older browsers */
    background: rgba(128,128,128,0.7); /* newer browsers */
}

.child {
    background: blue;
}

原始答案

令人讨厌，但CSS不允许这样做。为一个元素设置不透明度意味着没有子元素可以具有任何更大的不透明度。（25％不透明度的100％是？对。）

因此，一种解决方案是使用微小的透明PNG作为重复背景图像来解决这个问题。唯一的问题是IE6，而an excellent workaround called 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>

Answer 2

您也可以在不使用透明图像的情况下执行此操作。创建两个单独的div并使用z-index来控制哪一个在顶部

Example code on jsfiddle

Answer 3

如何使用可见性？

#parentDiv {
  visibility: hidden;
}

#childDiv {
  visibility: visible;
}

Answer 4

PNG将提供更好的兼容性（您必须使用IE6的过滤器：语句），但更好的CSS3方法只是使用RGBA颜色（例如背景：rgba（0,0,0,0.5）;在50％alpha 时会让你变黑; 会消除任何遗传不透明度。

Answer 5

使用rgba-color设置不透明度的父div的颜色会更有意义，因为在这种情况下，子元素不会继承不透明度而不会透明！

所以不要使用background-color：grey或#something，而是使用以下内容：

.modalBackground {
  background-color: rgba(222, 222, 222, 0.7);
}

像这样，parent-element的不透明度为0.7但不会将其继承到任何div或图像或此div中的任何内容！

网上有很多rgba发电机，试试吧。

http://www.css3-generator.de/rgba.html

Answer 6

试试这个

<div  class="" id="" style=" background: none repeat-x scroll 4px 3px lightgoldenrodyellow; left: 450px;  width:470px; text-align:center; height: 45px; position: fixed; 
  opacity:0.90;
    filter:alpha(opacity=40);
    z-index: 1000; ">
</div>

Answer 7

我能够在不透明的div后面放置透明div的方法是使用类似的东西：

`div.transparent-behind { opacity: 0.4; 
                      z-index: -1; }

 div.opaque-ontop { position: absolute; 
                top: (wherever you need it to fit)px;
                left: (some # of)px}'

其中div没有嵌套在彼此之内，而是在html中一个接一个地嵌套

有意义吗？

在透明父元素之上创建非透明div

7 个答案:

更新后的答案

CSS

原始答案