不同圖層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; 
}