遮罩层上面的图片显示怎么去掉半透明

预览

测试代码


<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
  <title></title>
  <meta charset="UTF-8">


<style type="text/css">

.mask{
     background: #000;
     position: absolute;
     left: 0px;
     top: 0px;
     height:100%;
     width:100%;
     z-index: 20;
     filter: alpha(opacity=60);
     opacity: 0.6;

}
.wrap{
     position:absolute;
     top:50%;
     left:50%;
     width:600px;
     height:400px;
     background: #FFF;
     z-index:21;
}
.box {
    position:absolute;
    top:-50%;
    left:-50%;
    display:block;
    width:600px;
    background: #FFF;
    height:400px;
    z-index:40px;
}

</style>
</head>
<body>


<div class="mask" id='part'   >

<div class='wrap'>

<div class='box' id='alert' style='display:none'>


<img width="100%"  src="http://img3.cache.netease.com/photo/0001/2016-05-24/BNS37GEP00AP0001.jpg" />
</div>
</div>

</div>

<script type="text/javascript">
function show(){
var alertPart=document.getElementById("alert");
alertPart.style.display="block";
/*
alertPart.style.position = "absolute";

alertPart.style.zIndex = "501";
*/



}

setTimeout(function(){

show();
},1000);

</script>



</body>
</html>

改为

.mask{
 background: reba(0,0,0,.6);
position: absolute;
 left: 0px;
 top: 0px;
 height:100%;
width:100%;
 z-index: 20;
}

PS:IE8+

如果图片是遮罩层的子元素的话，就不能用opacity了，用CSS3的background:rgba()

【热门文章】