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;