请问如何用js或css将文字叠加到图片上？

网页上有一张图片，我想用一个div将一段文字叠加在这个图片上。
我发现用alpha的话，连文字也都半透明了，这不行，理想状况是：div不可见，div上的文字可见，请问用css应当如何实现？

解决方案 »

  1.   

    div背景透明就可以，background:tranparent;<html>
    <head>
    </head>
    <body>
    <img src="http://www.csdn.net/ui/styles/public_header_footer/logo_csdn.gif">
    <div style="width:150px; height:60px; z-index:999; margin-top:-70px; background:trasparent; font-size:20px; font-weight:bold; color:green;">这是浮于图片之上的文字</div>
    </body>
    </html>
      

  2.   

    <div style="position:relative">
    <div style="position:absolute; left:0; top:0; color:#fff; font-weight:bold">图片文字</div>
    <img src="http://zi.csdn.net/2007.06/now120x60.gif"></img>
    </div>
      

  3.   

    div的背景透明，坐标绝对不就可以了？
      

  4.   

    去 flickr 看看，它的那个图片日历的部分就是这样的
      

  5.   

    呵呵，你要全部用DIV的话就用双DIV，也可以用3个DIV
      

  6.   

    <DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px"><img   src= "http://www.csdn.net/ui/styles/public_header_footer/logo_csdn.gif "> 
    </DIV>
         <DIV style="LEFT: 190px; POSITION: absolute; TOP: 11px; height:*;"></div>2个DIV的形式
      

  7.   

    <DIV style="LEFT: 0px; OVERFLOW: hidden; WIDTH: 779px; POSITION: relative; TOP: 0px; HEIGHT: 160px">
         <DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px"></DIV>
         <DIV style="LEFT: 190px; POSITION: absolute; TOP: 11px; height:*;"> </DIV>
       </DIV>