在html图片上方叠加一个半透明颜色层，并在半透明颜色层上叠加文字

话不多说，直接看代码，效果

效果图：

html代码

<div class="bg_img">
    <!--图片-->
    <img src="../photo/8_cont1_6.jpg" height="152" width="225"/>
    <!--span标签 半透明背景层-->
    <span class="ms">span标签</span>
    <!--div标签 半透明背景层-->
    <div class="toumingzi">div标签</div>
</div>

Css代码

.bg_img {
    /*相对位置*/
    position: relative;
    width: 225px;
    height: 152px;
}

.ms {
    /*绝对位置*/
    position: absolute;
    background: #a82327;
    /*透明度*/
    opacity: 0.8;
    /*span标签的大小*/
    width: 225px;
    height: 20px;
    /*偏移到div上*/
    left: 0;
    /*span标签下移*/
    bottom: 0.1px;
    text-align: center;
    color: white;

    /*copy的别人的代码，我没用到，我没深究其意 */
    /*filter:alpha(opacity=60);*/
    /*-moz-opacity:0.6;*/
}

.toumingzi {
    position: absolute;
    background: cornflowerblue;
    /*透明度*/
    opacity: 0.8;
    /*字体居中*/
    text-align: center;
    /*div标签上移*/
    top: 0.1px;
    width: 225px;
    height: 20px;
}