在透明的父元素上创建不透明的div

Question

在透明的父元素上创建不透明的div

26

编辑：更正了标题

我想在HTML和CSS中模拟一个模态弹出窗口，但在做的过程中有一个元素一直让我头疼。我希望最内层的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方面的专家，因此如果能解释一下为什么这个解决方案可行，那将不胜感激。

- Payton Byrd

7个回答

15

您也可以不使用透明图像来完成此操作。创建两个独立的div并使用z-index控制哪个在顶部。

在jsfiddle上查看示例代码

- smarty

1

这个解决方案（不包括透明图像）效果很好。只需确保内容模态框的 z-index 最高即可。 - Mike Padz

1

只要它们是 position: relative 或 absolute，这也可以很好地工作。 - user241244

1

这是我的解决方案。我想在单击句子中的单词时弹出一个小div。但我想隐藏我的弹出覆盖的背景部分而不是整个背景页面。这太棒了！谢谢。 - Gel

4

在这种情况下，使用rgba颜色设置父div的透明度更为合理，因为这样子元素不会继承透明度，也不会变成透明的！

因此，我们应该使用像这样的颜色来代替background-color: gray或#something：

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

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

网络上有许多rgba生成器，请尝试使用它们。

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

- Pingbeat

我不知道使用rgba不会导致继承。谢谢！ - user1885498

2

使用可见性如何？

#parentDiv {
  visibility: hidden;
}

#childDiv {
  visibility: visible;
}

- Zozos

这是一个非常棒的想法，尽管它不允许任何可见和不可见之间的中间地带。 - user241244

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中的另一个后面

明白吗？

- Ryan Greever

1

一个PNG图像提供更好的兼容性（你必须为IE6使用filter:语句），但CSS3更好的方法只是使用RGBA颜色（例如，background: rgba(0, 0, 0, 0.5);会让你得到黑色50%不透明度），这将消除任何继承的透明度。

- Nadav Daniel

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>

- PPB

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user241244 · Accepted Answer

更新的答案

现在最好的方法是使用rGBA颜色。这对于旧浏览器不起作用，但您可以通过提供纯色来优雅地降级设计。例如：

CSS

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

.child {
    background: blue;
}

原始答案

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

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