可以把图片作为文字那个块标签的背景图片或者你把图片和文字都放在一个同一个div 里面然后给图片和文字加上定位，然后文字的图层比图片的图层位置高就行了。
第一种
<style>
.div{width: 200pxheight: 200pxbackground: url("图片路径") no-repeat}
</style>
<div class="div">
<p>你的文字内容</p>
</div>
第二种
<style>
.div{width: 200pxheight: 200pxposition: relativez-index: 0}
.div img{position: absolutetop: 0left: 0width: 100pxheight: 100px}
.div p{position: absolutetop: 0left: 0z-index: 10}
</style>
<div class="div">
<img src="图片路径" alt="#">
<p>你的文字内容</p>
</div>
CSS怎么将一个元素重叠到图片上显示，假如我有一张图片，图片上面显示半透明的横条，横条上面有文字，效果如图：
<style>
.nav{backgrouan:url("../tupian.jpg")width:100pxheight:300px}
.nav ui li {width:100pxheight:30pxfilter:alpha(Opacity=80)-moz-opacity:0.5opacity: 0.5z-index:100background-color:#ffffffmargin-top:270px}
</style>
<div clas="nav">
<ul>
<li><a href="#">青山绿水</a></li>
</ul>
</div>
用CSS滤镜 纯手打
设置div的 z-index：div
{
position:absolute
left:0px
top:0px
z-index:-1
}
定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute）！
转载自http://www.w3school.com.cn/cssref/pr_pos_z-index.asp
<div style="position:absolutemargin:0"><img src="1.png" /></div><div style="position:absolutemargin:0 0 0 100px">覆盖</div>
