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

不同层次Div灯箱效果

1 个答案: