代码之家 › 专栏 › 技术社区 › Payton Byrd

在透明父元素的顶部创建非透明div

opacity css html

Payton Byrd · 技术社区 · 16 年前

编辑:将标题更改为实际对的

我试图在所有的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的专家,所以如果能解释一下为什么这个解决方案是有效的,我将不胜感激。

7 回复 | 直到 16 年前

user241244 user241244 9 年前

更新的答案

现在最好的方法是使用rGBA颜色。它不适用于较旧的浏览器,但您可以让设计优雅地降级,只需为它们提供纯色。例子:

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

.child {
    background: blue;
}

原始答案

信息技术是

因此,一种解决方案是使用一个微小的透明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>

smarty 14 年前

也可以不使用透明图像来执行此操作。创建两个单独的div,并使用z-index控制哪个div在上面

Example code on jsfiddle

Zozos 11 年前

使用可见性如何?

#parentDiv {
  visibility: hidden;
}

#childDiv {
  visibility: visible;
}

Pingbeat 10 年前

因此,不要使用背景色:灰色或#之类的颜色,而是使用以下颜色:

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

像这样,父元素的不透明度为0.7,但它不会继承到任何div或image或该div内部的任何内容!

网络上有很多rgba发生器,试试吧。

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

Nadav Daniel 11 年前

PNG将提供更好的兼容性(您必须为IE6使用filter:statement),但是 使用RGBA颜色 ( e、 g.背景:rgba(0,0,0,0.5);以50%的阿尔法让你变黑 这样就消除了任何遗传的不透明性 .

PPB 13 年前

<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>

Ryan Greever 10 年前

我将透明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中

有道理?