<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> text displayed on the picture </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;d isplay: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>
<body>
<div class= "Wrap" >
<div class= "Photo" ><a href= "#" >
<span> title stacked on the picture, title text and background translucent. The mouse passes through the border for color change. </span></a></div>
</div>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
CSS allows text to appear translucent on the image
