HTML5中的蒙版怎么实现。。。。。

最新推荐文章于 2023-12-18 17:50:24 发布

weixin_33736048

最新推荐文章于 2023-12-18 17:50:24 发布

阅读量1.1k

点赞数

原文链接：http://www.cnblogs.com/xydbk/p/7141677.html

版权

在很多网页中我们会看到在一个图片上面有一个半透明的色块，上面写有信息介绍，这个东西叫做蒙版，或者是遮罩。

那么这个蒙版是怎么实现的呢。。。

我们看下面这段代码：

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>蒙版\|\|遮罩</title>
	<style>
	.box1 {
	width: 830px;
	height: 470px;
	border: 1px solid #000;
	position: relative;
	overflow: hidden;
	}
	.mengban{
	width: 100%;
	height: 200px;
	background-color: rgba(255,0,0,.5);
	position: absolute;
	bottom: 0;
	transition: all linear 1s;
	}
	.box1:hover .mengban{
	bottom: -200px;
	}
	</style>
	</head>
	<body>

	<div class="box1">
	<img src="img/watchingU.jpg" alt="pic"/>
	<div class="mmengban>XX东西 XX钱...</div>
	</div>

	</body>
	</html>

上面的代码就是写蒙版的方式，这个只是下面的蒙版，如果要完成上下左右的蒙版都是一样的，只是定位的方向和蒙版的宽高需要自己取调整。

转载于:https://www.cnblogs.com/xydbk/p/7141677.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注