關於帶陰影的彈出層

背景
之前寫過一個帶遮罩的彈出層。代碼大致如下：

<div class="container">
	<img >
	.....
</div>

.container{
background-color:#000;
 opaticy:0.5;
 .....
}

這樣寫的問題是需要彈出的圖片透明瞭。因爲父級透明瞭，所以子級不管設沒設置透明度都沒效果！
解決
方法1：
父級不設置opacity,直接使用rgba控制

<div class="container">
	<img >
	.....
</div>
.container{
background-color:rgba(0,0,0,0.5);
}

方法2：
父級不設置opacity，加一個設置了opacity的兄弟節點，絕對定位鋪滿。

<div class="container">
	<div class="shade"></div>
	<img >
	.....
</div>
.container{
position:relative;
}
.container>.shade{
postion:absolute;
background-color:#000;
opacity:0.5
}