如何在图片上面装一个透明的遮罩层

先说思路：
把图片用做背景，然后写一个position:absolute;的div浮动于它的上面，这个层设定一个半透明opacity:0.7;

css代码

.left{
    position: absolute;
    z-index: 1;
    width: 191px;
    height: 301px;
    background-color: #335544;
    opacity: 0.6;
}
.right{
    position: absolute;
    z-index: 1;
    width: 191px;
    height: 301px;
    margin-left: 450px;
    background-color: #6D4550; 
    opacity: 0.6;
}

html代码

<div class="pic">
    <div class="left"></div>
    <div class="right"></div>
</div>  

效果如下