HTML5中的蒙版怎么实现_随笔

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

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

我们看下面这段代码：

<!DOCTYPE html>

<html>

<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>

</body>

</html>

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

添加div透明度

div{

width：100%；

height：100%；

background-color:red

opacity:0.2

}

欢迎分享，转载请注明来源：内存溢出

HTML5中的蒙版怎么实现