HTML | 图片底部文字添加效果——css实现

2018年8月11日 0条评论

HTML | 图片底部文字添加效果——css实现

做网页开发需要一点点的经验积累，不过你做什么，持之以恒，你的收获将是巨大的！

本次主要讲的是实现图片下方透明文字，效果如下图：

实现这样一个效果是很简单的，具体参看代码演示中的代码，也可以运行代码测试。

以下为全部代码：

<!DOCTYPE html>
<html>
<head>
	<title>HTML | 图片底部文字添加效果——css实现 - 飞翔灬吾爱的Blog</title>
	<meta charset="UTF-8">
	<meta name="generator" content="emlog" />
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="keywords" content="css,html,效果,图片底部文字" />
	<meta name="description" content="">
	<meta name="apple-mobile-web-app-title" content="飞翔灬吾爱的Blog" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<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="http://img.fishyoung.com/images/180807/cCgb44CmK6.png" width="486" height="344" border="0" /><span class="class_cover">物联网已来</span></a>
 
</body>
 
</html>

Plugins by fishyoung.com

您阅读这篇文章共花了：