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

来源：互联网发布：vb数据库编程教程编辑：程序博客网时间：2024/06/14 10:33

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

效果图如：

字的内容由程序来处理:

 <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");          });