CSSで画像に文字を重ねる

<style>
    .mojikasane{
        position:relative;
    }
    .mojikasane span{
        position:absolute;
        bottom:5px;
        left:0px;
        width:150px;
        text-align:center;
        color:#fff;
        line-height:150%;
        background-color:#000;
        filter:alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
    }
    .mojikasane img{
        width:150px;
    }
</style>

<div class="mojikasane">
    <img src="[yourimg]" />
    <span>テキスト</span>
</div>

コピペで動くよ