为什么z-index不适用于不透明？

我有两个div，在外部div我给了.1的不透明度，然后我有一个内部div不应该继承父容器不透明属性。但为了避免这种情况，我所做的是添加一个z-index属性（对子元素更高），但它不起作用。如何避免子div继承其父容器的不透明属性：为什么z-index不适用于不透明？

<!DOCTYPE HTMl> 
<html> 
    <head> 
     <style type="text/css"> 
      #outer{width:500px;height:400px;background:#000000;border:1px solid red;opacity:.1;z-index:1} 
      #inner{width:450px;height:350px;background:#ffffff;margin: 0 auto;margin-top:20px;z-index:2} 

     </style> 
    </head> 
    <body> 
     <div id="outer"> 
      <div id="inner"> 
      </div> 
     </div> 
    </body> 
</html>

来源

2012-07-22 Mike

您不能使用z-index来定位父/子之间的相对位置。 Google搜索[“opacity inheritance css”]（https://www.google.com/webhp?rlz=1C1TSNP_enUS471US471&sourceid=chrome-instant&ie=UTF-8#hl=zh-CN&rlz=1C1TSNP_enUS471US471&output=search&sclient=psy-ab&q=opacity% 20inheritance％20css＆oq =＆gs_l =＆pbx = 1＆fp = e90d0913f918c708＆bav = on.2，or.r_gc.r_pw.r_cp.r_qf。，cf.osb＆biw = 1178＆bih = 614）为您提供了一堆关于您的问题的优秀文章。 – jfriend00 2012-07-22 04:10:43

你也可以查看这个http://stackoverflow.com/questions/5138006/no-opacity-on-div-inside-a-div-with-opacity-css – 2012-07-22 04:22:38

您可以使用rgba属性来使其工作。以下ae-G应该工作：

<!DOCTYPE HTMl> 
<html> 
    <head> 
     <style type="text/css"> 
      #outer{width:500px;height:400px;background:#000000;border:1px solid red;background:rgba(255,0,0,0.5);} 
      #inner{width:450px;height:350px;background:#ffffff;margin: 0 auto;margin-top:20px;background:rgba(255,0,0,1);} 

     </style> 
    </head> 
    <body> 
     <div id="outer"> 
      <div id="inner"> 
      </div> 
     </div> 
    </body> 
</html>

来源

2012-07-22 04:44:23 defau1t

你为什么会认为内DIV不应该受到它的父，或outterWrapper，DIV？

不要使用不透明度作为cssStyleAttribute（或简称为CSS属性），使用 '过滤器'（对于IE）

filter:alpha(opacity=10);

现代浏览器，指定与RGBA，RGBA颜色值（0,0 ，0,0.5） - 半透明黑色。

首先，文本/ CSS

#outterWrapper { 
position:relative; 
background-color:black; 
background-color:rgba(0,0,0,0.5); 
filter:alpha(opacity=50); 
border:3px solid red; 
border:3px solid rgba(255,0,0,0.8); 
min-width:400px; 
min-height:400px; 
width:50%; 
height:50%; 
display:block; 
} 
#innerWrapper { 
display:block; 
background-color:blue; 
position:absolute; 
left:2%; 
top:2%; 
width:96%; 
height:96%; 
z-index:2; 
}

，比除数，

<div id="outterWrapper"><div id="innerWrapper">&nbsp;</div></div>

在任何情况下，你应该总是指定cssStyleAttributes '显示' 和 '位置'。您还应该在内部div中放置空格（' '）。

来源

2012-07-22 04:56:20

为什么z-index不适用于不透明？

回答

相关问题