Html 在透明父元素之上创建非透明 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2356711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create non-transparent div on top of transparent parent element
提问by Payton Byrd
EDIT: Changed title to actually be correct
编辑：更改标题实际上是正确的
I'm trying to simulate a modal popup in all HTML and CSS and am having a bit of bad luck with one single element of what I'm doing. I want the innermost div, the one with the content, to not be opaque like the border is, but no matter what I try with the CSS I cannot get it to work. Here's the code:
我正在尝试在所有 HTML 和 CSS 中模拟一个模态弹出窗口，并且我正在做的一个元素有点运气不好。我希望最里面的 div，即包含内容的 div 不像边框那样不透明，但是无论我尝试使用 CSS 做什么，我都无法让它工作。这是代码：
The CSS
CSS
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
The HTML
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>
I am reaching my witt's end on this. I'm no HTML or CSS guru by any means, so an explanation of why the solution works would be greatly appreciated.
在这件事上，我的智慧快要结束了。无论如何，我都不是 HTML 或 CSS 专家，因此对解决方案为何有效的解释将不胜感激。
回答by
Updated Answer
更新答案
The best way to do this now is to use rGBA colors. It won't work for older browsers, but you can let the design gracefully degrade by just feeding them a solid color. Example:
现在最好的方法是使用 rGBA 颜色。它不适用于较旧的浏览器，但您可以通过为它们提供纯色来让设计优雅地降级。例子：
CSS
CSS
.parent {
background: gray; /* older browsers */
background: rgba(128,128,128,0.7); /* newer browsers */
}
.child {
background: blue;
}
Original Answer
原答案
It isannoying, but CSS doesn't allow that. Setting opacity for one element means no child element can have any greater opacity. (100% of 25% opacity is? Right.)
这很烦人，但 CSS 不允许这样做。为一个元素设置不透明度意味着没有子元素可以具有更大的不透明度。（25% 不透明度的 100% 是？对。）
So, one solution is to use a tiny transparent PNG as a repeating background image to work around that. The only issue there is IE6, and there's an excellent workaround called supersleight.
因此，一种解决方案是使用一个微小的透明 PNG 作为重复的背景图像来解决这个问题。唯一的问题是 IE6，并且有一个很好的解决方法，称为 supersleight。
(Updated. Think supersleight will work for you.)
（更新。认为 supersleight 对你有用。）
UpdateHere's a very simple test case. Create the image (say, a PNG with 50% black fill) and then create this file--save them in the same folder. If you don't see a thin box with a transparent background behind 'stuff', then you're either not saving the file correctly or have saved the image somewhere else.
更新这是一个非常简单的测试用例。创建图像（例如，具有 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>
回答by smarty
You can also do this without using a transparent image. Create two separate divs and use z-index to control which one is on top
您也可以在不使用透明图像的情况下执行此操作。创建两个独立的 div 并使用 z-index 控制哪个在最上面
回答by Zozos
How about using visibility?
如何使用可见性？
#parentDiv {
visibility: hidden;
}
#childDiv {
visibility: visible;
}
回答by Pingbeat
Setting the color of the parent div with opacity with a rgba-color would make more sense here, because in this case the child element wouldnt inherit the opacity and wont be transparent!
将父 div 的颜色设置为不透明度和 rgba 颜色在这里会更有意义，因为在这种情况下，子元素不会继承不透明度并且不会透明！
so instead of using background-color: gray or #something, use something like this:
因此，不要使用 background-color: gray 或 #something，而是使用以下内容：
.modalBackground {
background-color: rgba(222, 222, 222, 0.7);
}
Like this the parent-element has an opacity of 0.7 but is does not inherit it to any div or image or whatever inside of this div!
像这样，父元素的不透明度为 0.7，但不会将其继承给任何 div 或图像或此 div 内的任何内容！
There are many rgba-generators out there on the net, try them.
网上有很多 rgba 生成器，试试吧。
回答by Nadav Daniel
A PNG would provide better compatibility (you have to use a filter: statement for IE6) ,but the better CSS3 methodis just to use RGBA colours(e.g. background: rgba(0,0,0,0.5); will get you black at 50% alpha), that gets rid of any inherited opacity.
PNG 将提供更好的兼容性（您必须使用过滤器：IE6 的语句），但更好的 CSS3 方法只是使用 RGBA 颜色（例如背景：rgba(0,0,0,0.5); 会让你在50% alpha)，它消除了任何继承的不透明度。
回答by PPB
Try this
尝试这个
<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>
回答by Ryan Greever
The way that I was able to put a transparent div behind an opaque div was to use something like:
我能够将透明 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}'
where the div's were not nested inside each other, but one right after another in the html
其中 div 不是相互嵌套的，而是在 html 中一个接一个地嵌套
make sense?
有道理？
