css设置图片某个区域为文字区域(让两个div重合)

为了播放音乐。音乐的按钮有一个区域，放提示语，用程序动态设置。

效果图如：

字的内容由程序来处理:

 <div style="position:relative">
					  <!-- 图片的DIV -->
					 <div style="position:absolute; float:left; top:0px; left:0px;">
					 <img style="width:320px"  src="${ctx}/images/guide/player_start.png" name="playAudio" id="playAudio">
					 </div>
					 
					 <!-- 提示语的DIV-->
					 <div id="tips" style="position:absolute; float:left;top:17px;left:70px;height:18px;width:200px;color:white;">可点击按钮播放音频介绍</div>
					 </div>

附对应的图片：

 $("#playAudio").click(function(){
    		 var isPause=$("#isPause").val();
    		 //alert("isPause:"+isPause);
    		 var srcUrl=  $("#playAudio").attr("src");
    		 if(srcUrl.indexOf("player_start")>0){
    			 if(isPause==""){
    				// alert("player_start");
        			 window.meeting.setMusicUrl('${meetingContent.reserve2}');
        			 $("#isPause").val("pause");
    			 }
    			 window.meeting.startPlay();
    			 $("#tips").html("正在播放中......");
    			 $("#playAudio").attr("src","${ctx}/images/guide/player_pause.png");
    		 }else if(srcUrl.indexOf("player_pause")>0){
    			// alert("player_pause111111");
    			 window.meeting.pausePlay();
    			 $("#tips").html("已暂停,点击继续");
    			 $("#playAudio").attr("src","${ctx}/images/guide/player_start.png");
    		 }
    		 
    		// window.meeting.startPlay('${meetingContent.reserve2}');
    		// $("#playAudio").attr("src","${ctx}/images/guide/player_pause.png");
    		 
    	 });