前端遮罩层实现_前端制作遮罩与蒙版

-1

遮罩： 有色则显示，无色抠取，半透明则半透明

蒙版： 黑色则抠除，白色显示，灰色则半透明

概念上两者非常容易混淆，但完成的效果是一样的，需记住哪个是无色抠取，哪个是黑色抠除。

再者还有个裁剪，只是做裁切，没有对半透明情况的处理。

这样一说就知道，本文阅读起来可能是会有点乱的。

那么前端方法中 如何实现，又各 有哪些应用场景 呢？

mask(css) (遮罩)

mask(svg)(蒙版)

background-clip(css)(裁切)

clip(canvas)(裁切)

globalCompositeOperation(canvas)(遮罩)

clip-path(css, svg)(裁切)

其他旁门左道

mask(css)

比较容易搜到的，也是用得最多的，强得一批。

现在是只有遮罩功能的，mask 指定的是下层形状，本元素及其所有子级为上层图案。

以后的发展可能会通过 mask-composite 实现蒙版，小期待一下吧。

遮罩嘛，即有色就显示，无色则隐藏。

rgba(0,0,0,0)、tranpsarent，png 图片中的透明 或 无色 就抠除。

mask 和 background 的设置非常类似，也可以缩写：

mask-image / mask-repeat / mask-position / mask-size / mask-origin / mask-clip

mask-image 也和 background-image 一样支持 url， gradient，image-set，element 等等。

举几个栗子：

/* 滚动容器底部带点效果 */

.scroller-mask {

-webkit-mask: linear-gradient(#000 calc(100% - 5em), transparent);

mask: linear-gradient(#000 calc(100% - 5em), transparent);

}

/* 当然用 linear-gradient + pointer-events:none 也是不错的方法 */