Question

我有一个包含多个div容器的页面。第一个是页面容器，下一个是Modal容器。在Modal容器中，我有第一个窗口容器。在Modal容器之外，我有另一个DIV容器用于按钮。我想要的是让Modal容器和按钮容器处于不同的级别（两者在同一级别），其余部分在下层，并且它们之间具有透明性。

我试图捕捉这种情况（我从搜索stackoverflow问题得到的过滤器想法）： http://jsfiddle.net/Q2CNz/

#Modalcontainer {

position:absolute;
z-index :9999;    
background: transparent;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
/* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
    /* IE6 & 7 */
    zoom: 1;
}

我在IE中遇到了几个问题：

a）第一个窗口中的东西和按钮容器不在同一级别上。这可能与位置有关？我尝试了一些组合，没有任何效果 b）较高级别的东西与较低级别的东西之间没有透明度。这个东西主要用于IE6以上。请让我知道，我怎么能做到这一点。请不要让我使用jQuery，我们的命令不允许使用jQuery。

Answer 1

我不太清楚你们之间的“透明度”是什么意思..你们代码中的内容是渐变（尽管它是从结尾的相同颜色开始），而不是不透明度（透明度设置。

同样，只要他们处于同一级别 - 但是在不同的级别？你写道：

我想要的是将Modal容器和按钮容器放在不同的级别（两者都在同一级别）

你的意思是并排排队而不是重叠吗？

由于我不太清楚你的意思，我改变了你的例子并在模态容器上添加了不透明度以及黑色到白色渐变，并在页面容器上添加了背景颜色，这样你就可以看到不透明度

http://jsfiddle.net/YCLnj/

#Pagecontent {
    background-color:#663333;
}
#Modalcontainer {
    width:70px;
    height:70px;
    padding:30px;
    border:2px solid #000;
    z-index:9999;
    filter: alpha(opacity=70);
    opacity:0.7;
    -moz-opacity:0.7;
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#FFFFFF));
    background:-webkit-linear-gradient(center top, #000000, #FFFFFF);
    background:-moz-linear-gradient(center top, #000000, #FFFFFF);
    background:-o-linear-gradient(center top, #000000, #FFFFFF);
    background:linear-gradient(center top, #000000, #FFFFFF) repeat scroll 0 0 transparent;

    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#FFFFFF)";

    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000, endColorstr=#FFFFFF)";

   /* IE6 & 7 */
   zoom: 1; 
}

#buttonContainer {
    position:relative;
    z-index:9999;
    background:transparent;
    padding:10px;
    width:100px;
    border: 2px dotted #CC33FF;
}

如果你想让div彼此重叠，你只需将每个位置的位置更改为绝对值并相应地调整z-index，最低数字位于底部，最高位于顶部。在这种情况下，您可能希望将按钮层放在顶部，否则用户将无法访问按钮以进行单击。

多个DIV容器上的Z-index和透明度不起作用

1 个答案: