25

编辑：更改标题实际上是正确的

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

4

7 回答 7

31

更新的答案

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

CSS

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

.child {
    background: blue;
}

原始答案

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

因此，一种解决方案是使用一个微小的透明 PNG 作为重复的背景图像来解决这个问题。唯一的问题是 IE6，并且有一个很好的解决方法，称为 supersleight。

（更新。认为 supersleight 会为你工作。）

更新 这是一个非常简单的测试用例。创建图像（例如，一个带有 50% 黑色填充的 PNG），然后创建这个文件——将它们保存在同一个文件夹中。如果您没有在“东西”后面看到一个带有透明背景的薄框，那么您要么没有正确保存文件，要么将图像保存在其他地方。

<!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>
于 2010-03-01T15:18:54.997 回答
15

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

jsfiddle 上的示例代码

于 2012-07-21T14:40:51.560 回答
2

如何使用可见性？

#parentDiv {
  visibility: hidden;
}

#childDiv {
  visibility: visible;
}
于 2015-09-30T18:10:46.627 回答
2

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

所以不要使用背景颜色：灰色或#something，而是使用这样的东西：

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

像这样，父元素的不透明度为 0.7，但不会将其继承到任何 div 或图像或此 div 内部的任何内容！

网上有很多 rgba 生成器，试试吧。

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

于 2016-08-02T08:37:22.140 回答
1

PNG 将提供更好的兼容性（您必须为 IE6 使用 filter: 语句），但更好的 CSS3 方法只是使用 RGBA 颜色（例如 background: rgba(0,0,0,0.5); 会让你变黑50% alpha )，消除任何继承的 opacity。

于 2015-09-25T17:51:40.463 回答
1

我能够将透明 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 中一个接一个地嵌套

有道理？

于 2015-10-23T02:45:04.613 回答
0

试试这个

<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>
于 2013-03-20T11:35:33.200 回答