可以把图片作为文字那个块标签的背景图片或者你把图片和文字都放在一个同一个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滤镜 纯手打
1、首先，我们应该先给div设置宽度和高度，保证文字有一个范围。
2、然后通过background给div添加一张图片作为它的背景。
3、接着可以通过url()来连接图片，url里面放置的就是背景图片的路径。
4、随意地放了一张图片用作背景，一定要注意，路径要写对。
5、这样，保存之后文字就会覆盖在图片的上面了。
设置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
