<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文字显示在图片上</title> <style type="text/css"> *{border:none;text-decoration:none} .wrap{margin:8px;position:relative} .photo a{position:absolute;display:block;border:1px solid #555555;} .photo a:hover{border:1px solid #FFFFFF;} .photo span{width:500px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=50);-moz-opacity:0.6;opacity:0.6;font:bold 12px/30px Verdana, Arial; text-align:center;cursor:hand;} .photo a:hover span{text-decoration:underline} </style> </head> <body> <div class="wrap"> <div class="photo"><a href="#"> <img src="/jscss/demoimg/wall8.jpg" border="0" alt=""/><span>标题层叠在图片上，标题文字和背景半透明。鼠标经过边框换色。</span></a></div> </div> </body>