不同图层Div灯箱效果

Question

我正在制作灯箱效果。使用GridView向用户显示图像。点击其中一个图像后，应该在当前页面上方显示另一个图层，并给出更大的图像和描述。我设法显示图层及其内容的图层，但一切都是透明的。我试图设置不透明度为1和移动其他元素Z-index较高，但没有任何工程

这里是我的CSS代码

#imageshown{ 
position:absolute; 
z-index:1; 
width:1000px; 
height:600px; 
background:#000; 
opacity:0.8; 
} 

#imageshown > img{ 
opacity:1; 
z-index:2; 
position:relative; 
top:15px; 
width:450px; 
height:450px; 
margin:0 auto; 

} 

#image_content{ 
opacity:1; 
z-index:2; 
position:relative; 
top:15px; 
width:450px; 
height:100px; 
margin:0 auto; 
background:#FFF; 
} 

#exit{ 
position:absolute; 
border-radius:50px; 
background:#006; 
opacity:1; 
top:-5px; 
left:-5px; 
z-index:2; 
color:white; 
text-align:center; 
width:30px; 
height:30px; 
} 

和我的jQuery代码

$("#imggroup img").click(function(e) { 
    $(document).find(".NewElement").remove(); 
    var ImageElement ="<img src=\"" + $(this).attr("src") + "\" alt=\"image shown\" />"; 
    var DivContents = "<div id=\"image_content\"> blah blah blah </div>"; 
    var Exit = "<div id=\"exit\" > X </div>"; 
    var ElementWrap = "<div id=\"imageshown\" class= \"NewElement\"> "+ ImageElement + DivContents+ Exit+"</div>"; 
    alert(ElementWrap); 
    $("#container").prepend(ElementWrap); 
}); 

我有功能也可以退出，但我不能点击它

Answer 1

不管你设置的不透明度如何，对父母给予不透明度将会级联到所有的孩子。所以通过设置opacity: 0.8我猜是父容器，每个孩子都会有相同的不透明度。

一种方式来获得一个元素的透明度不影响孩子们是用透明背景：

#imageshown { 
    background:#000; //leave this if you need to support IE8 and lower which don't support rgba 
    background: rgba(0,0,0, 0.8); 
    //opacity:0.8; remove this 
} 

如果你确实需要支持旧版IE和希望的透明度，你可以使用这里的回退：http://css-tricks.com/rgba-browser-support/。

#imageshown { 
    background:transparent; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000); //first two numbers are transparency and based on hex values 
    zoom: 1; 
}