随便写几种。
------------------------------
CSS部分：
.text{background-imageurl(pic.jpg)
width: xx px /*你自己定义的宽*/
height: xx px /*你自己定义的高*/
overflow:hidden/*超出部分隐藏*/}
.text span{
margin-top:xx px/*离上边距离*/
margin-left:xx px/*离左边距离*/
}
html部分：
<div class="text"><span>字</span></div>
------------------------------
CSS部分：
.text{background-imageurl(pic.jpg)
width: xx px /*你自己定义的宽*/
height: xx px /*你自己定义的高*/
position:relative/*相对定位*/}
.text span{
position:absolute/*绝对定位*/
top:xx px/*离上边距离*/
left:xx px/*离左边距离*/
}
html部分：
<div class="text"><span>字</span></div>
--------------------------------------
CSS部分：
.text{background-imageurl(pic.jpg)
width: xx px /*注意，这里是你自己定义的宽减去padding-left的值*/
height: xx px /*注意，这里是你你自己定义的高减去padding-top的值*/
padding-top:xx px/*离上边距离*/
padding-left:xx px/*离左边距离*/
}
html部分：
<div class="text">字</div>
lz自己选吧。
你指的最上层是文字盖住下面其它的内容吗？如果是的话，在css放置文字的元素样式中加上一条z-index:1就可以了（假设所有的元素的z-index属性前面没设置过，如果设置过了，那么放置文字的元素样式z-index值设成比前面设的值大一点就可以了，值越大表示越上面）
一种是用vertical-align来对齐；一种是relative+absolute，用top：0；来定位，一种是用css3的box-align属性对其，看你的选择咯，每一种的属性设置还有其他要求。
