在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;}