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

【问题标题】：Create non-transparent div on top of transparent parent element在透明父元素之上创建非透明 div
【发布时间】：2011-01-22 08:07:14
【问题描述】：

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

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

【问题讨论】：

标签： html css opacity

【解决方案1】：

更新答案

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

CSS

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

.child {
    background: blue;
}

原答案

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

因此，一种解决方案是使用微小的透明 PNG 作为重复背景图像来解决此问题。唯一的问题是 IE6，还有an excellent workaround called supersleight。

（已更新。认为 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>

【讨论】：

我尝试向最里面的 div 添加纯色背景，但没有效果。也许我做错了。这是我使用的 CSS： .solidBackground { background-image: url('images/176x1.PNG');背景重复：重复-y； } 176x1 是一个 1 位的 PNG，整体设置为白色。
CSS 看起来不错，但请检查路径是否正确（可能是 ../images/176x1.png'）。
另外，当然，您需要确保将 PNG 保存为透明度。
我做错了什么。你能指出一个不使用 Javascript 的工作示例吗？
我已经搜索这个很久了。谢谢！

【解决方案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

【讨论】：

【解决方案3】：

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

有意义吗？

【讨论】：

【解决方案4】：

如何使用可见性？

#parentDiv {
  visibility: hidden;
}

#childDiv {
  visibility: visible;
}

【讨论】：

这是一个非常巧妙的想法，尽管它不允许在可见和不可见之间存在任何中间地带。

【解决方案5】：

PNG 会提供更好的兼容性（对于 IE6，您必须使用 filter: 语句），但更好的 CSS3 方法只是使用 RGBA 颜色（eg background: rgba(0,0,0,0.5); 在 50% alpha 时会让你变黑)，消除任何继承的不透明度。

【讨论】：

【解决方案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>

【讨论】：

【解决方案7】：

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

Example code on jsfiddle

【讨论】：

这个解决方案（没有透明图像）效果很好。只需确保内容模式的 z-index 位于最顶层即可。
这也很好用，只要它们是position: relative 或absolute。
这是我的情况的解决方案。当我从一个句子中单击一个单词时，我想弹出一个小 div。但我想隐藏弹出窗口覆盖的背景部分，而不是整个背景页面。这太棒了！谢谢。