css特效文字显示在图片上半透明

分享到：

来源：51模板集浏览：次发布时间：2014-05-17 08:43

如何让图片的底部显示半透明特效，同时图片上面还有文字显示，51模板集提供css特效文字显示在图片上半透明效果

css特效文字显示在图片上半透明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css特效文字显示在图片上-51模板集</title>
<style type="text/css">
*{border:none;text-decoration:none}
.wmp{margin:8px;position:relative}
.photo1 a{position:absolute;display:block;border:1px solid #555555;}
.photo1 a:hover{border:1px solid #FFFFFF;}
.photo1 span{width:600px;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;}
.photo1 a:hover span{text-decoration:underline}
</style>
</head>

<div class="photo1">
    <a href="/pmjc/shouhui/100.html">
    <img src="http://www.51mubanji.com/uploads/allimg/130806/1_130806095152_1.jpg" border="0" alt=""/><span>简洁美感的手绘网页效果-51模板集独家奉献</span></a>
    </div>	
</div>
</body>
</html>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。