当前位置：网站首页 > 资源显示

html图片上加遮罩文字层

发布时间：2017/5/2 21:43:28 / 最后修改：2019-3-28 15:39:51 / 浏览：769

2019-3-28 修改过，文字第三层，这样文字很清晰

完整代码（代码框可以往下拉高显示）：

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body {
	margin-left: 20px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
}
body,td,th {
	font-size: 12px;
}
a:link {
	color: #646464;
	text-decoration: none;
}
a:visited {text-decoration: none;color: #646464;}
a:hover {text-decoration: none;color: #d6171f;}
a:active {text-decoration: none;color: #646464;}

.pica{position:relative;}
.pica .pictitle{
	position: absolute;
	left: 0;
	line-height: 33px;
	background-color: #282828;
	display: block;
	height: 33px;
	width: 100%;
	right: 0px;
	bottom: 0px;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
	text-decoration: none;
}
.pica .pictitle span{
	position: absolute;
	color: #FFF;
	width: 100%;
	text-align: center;
	line-height: 33px;
	height: 33px;
}

</style>
</head>
<body>

<div class="pica">
<a href="#"><img src="images/test_1.jpg" width="290" height="120" border="0" /></a>
<div class="pictitle"><span>修改个人图像</span></div>
</div>

</body>
</html>

附件资源（免费）

您尚未登录，暂时无法查阅资源！立即登录

插播广告区

发表评论

您尚未登录，暂时无法发表评论。立即登录

暂无任何评论

推荐资源更多 >>

付费资源更多 >>

广告区