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>

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

请问要蒙上什么样的一层灰色？

1. bosonbai说的 opacity 是控制元素的透明度，filter的写法是IE适用，

还可以写成 opacity:0.7 ，兼容Chrome

2. 如果是需要一层半透明黑灰色，挡着图片，你需要弄一个position: absolutebackground:#000opacity:.7的div遮挡，注意宽度高度，和位置

3. 如果是想让图片变成黑白色，需要 filter: grayscale(100%)，具体可以自行搜索

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

HTML5中的蒙版怎么实现