【摘要】今天想到可以给小伙伴们一个示范，做网页开发需要一点点的经验积累，持之以恒，你的收将是巨大的！本次主要讲的是实现图片下方透明文字，如下图：实现这样一个效果是很简单的。<!DOCTYPEhtml><htm...
今天想到可以给小伙伴们一个示范，做网页开发需要一点点的经验积累，持之以恒，你的收将是巨大的！
本次主要讲的是实现图片下方透明文字，如下图：
实现这样一个效果是很简单的。
<!DOCTYPE html>
<html>
<head>
<title>学习测试页面-好玩儿资源网</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="好玩儿资源网,www.dyboy.top,分享资源"/>
<meta name="description" content="I love you!My world!"/>
<meta name="revised" content="DYBOY,2017/01/17" />
<style>
.class_outer{
dispaly:block;
width:486px;
height:344px;
margin:10px auto;
position:relative;
overflow:hidden;
}
.class_cover{
width:99%;
height:50px;
line-height:50px;
padding-left:5px;
background-color:rgba(0,0,0,.50);
color:#FFFFFF;
font-size:26px;
position:absolute;
left:0px;
bottom:0px;
}</style>
</head>
<body>
<a href="#" class="class_outer"><img src="1.jpg" width="486" height="344" border="0" /><span class="class_cover">大学生玩儿游戏猝死</span></a>
</body>
</html>
整个代码就是这样，在下方可下载课件资料。
未经允许不得转载：第一资源网 » HTML学习 | 图片底部透明css实现
小东
简介：专业团队网站开发、安全运维，合作意向请联系！
发表评论