HTML学习 | 图片底部透明css实现

【摘要】今天想到可以给小伙伴们一个示范,做网页开发需要一点点的经验积累,持之以恒,你的收将是巨大的!本次主要讲的是实现图片下方透明文字,如下图:实现这样一个效果是很简单的。<!DOCTYPEhtml><htm...

今天想到可以给小伙伴们一个示范,做网页开发需要一点点的经验积累,持之以恒,你的收将是巨大的!

本次主要讲的是实现图片下方透明文字,如下图:

20170117154331.png

实现这样一个效果是很简单的。


<!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>
整个代码就是这样,在下方可下载课件资料。



 小东
 简介:专业团队网站开发、安全运维,合作意向请联系!

扫码关注微信公众号:ITDYBOY,学前端,学安全,从0到1,从1到精通!

扫码关注微信公众号:ITDYBOY

发表评论

游客
送你一朵小花花~

帅人已评(10)

学习了
LV 1 格格 7年前 (2017-03-17) 回复