使用css属性能很好的解决这个问题。

html 代码如下

<div class="fuchi_pic">
    <img src="images/youshi1.jpg">
    <div class="fuchi_pic_title">— 前期规划 —</div>
</div>

css代码如下

.fuchi_pic{position:relative;overflow:hidden;border-radius:5px 5px 0 0}
/*创建遮盖图层元素，并定义其背景颜色，透明度*/
.fuchi_pic::before{position: absolute;z-index:9;top: 0;left: 0;width: 100%;height: 100%;content: "";background-color:rgba(0,0,0,0.5);opacity:1;}

这样就能得到你想要的效果。

如果上面想展示文字，可以使用下面的css

.fuchi_pic_title{position: absolute;z-index:9;top:40%;text-align:center;color:#fff;font-size:1.6rem;font-weight:300;width:100%;}