父级元素透明，子级元素不透明

html：

<div class="imgr">
<img src="images/pic1.png" alt="" />
<div class="div2">
<p class="p2">二维码已失效</p>
<div class="div3">
<a href="javascript:void(0)" class="a1">点击刷新</a>
</div>
</div>
</div>

CSS：

.imgr{
position: relative;
width: 160px;
height: 160px;
}
.div2{
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 160px;
background-color:rgb(255,255,255);
background-color: rgba(255,255,255,.9);
filter: alpha(opacity:90);
/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity:90)";*/
}

.p2 {
position:relative
margin-top: 36px;
font-size: 18px;
line-height: 38px;
color: #333;
text-align: center;
}
.div3{
position:relative;
margin: 0 auto;
width: 100px;
height: 40px;
background: #F65A5A;
border-radius: 4px;
}
.a1{
display: block;
width: 100%;
height: 40px;
font-size: 16px;
line-height: 40px;
color: #fff;
text-align: center;
}

效果图：

总结：

1、父级透明颜色定位不能写z-index，否则IE9及以下版本子级还是会透明(FF和Chrome不透明);

2、父级给背景颜色应写为background-color:rgb(255,255,255);background-color: rgba(255,255,255,.9);如果只写rgb然后给一个opacity:.9;IE9及以上版本，FF和Chrome仍然会透明

3、父级不用写-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity:90)";写了好像也没用，所以我给删掉了;

4、子级元素应给position:relative;