本篇内容主要讲解“怎么用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=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="wall8.jpg" border="0" alt=""/>
<span>标题层叠在图片上，标题文字和背景半透明。鼠标经过边框换色。
</span>
</a></div>
</div>
<div>亿速云：https://www.yisu.com/</div>
</body>
到此，相信大家对“怎么用CSS实现让文字半透明显示在图片上”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
