CSS让文字半透明显示在图片上层
清泛原创
效果图：
HTML代码如下：
HTML代码如下：
<html>
<head>
<meta http-equiv="Content-Type" mrc="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:360px;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="https://www.tsingfun.com/statics/images/logo.png" border="0" alt=""/><span>标题层叠在图片上，文字和背景半透明。鼠标经过边框换色。</span></a></div>
</div>
</body>
</html>
上一篇：二维码的生成细节及原理
下一篇：discuz插件开发新手入门
评论加载中，请稍后...