51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

CSS让文字半透明显示在图片上

时间:2017-08-16 10:42点击:
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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="/uploads/allimg/170816/104242D33-0.jpg" border="0" alt=""/><span>标题层叠在图片上,标题文字和背景半透明。鼠标经过边框换色。</span>
    </a></div>
</div>
<div><A href="http://www.51kydm.com/">http://www.51kydm.com/</A></div>
</body>
51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开