CSS-MASK

顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

遮罩必须有两个图层，上面一个为遮罩层，下面一个为被遮罩层，这两个图层中只有重叠部分才会有效果，其要求是，如果遮罩层完全不透明，被遮罩层原图显示，如果遮罩层部分透明，原图也会有些透明，遮罩层完全透明，被遮罩层不显示；可理解为，把遮罩层每个部分的透明度一一对应附加到被遮罩层上

注意： 遮罩层如果是图片那么一般是PNG格式的，且有透明部分的

 

MASK 属性值包括（类似于background)

mask-imgae

mask-mode

mask-repeate

mask-position

mask-clip

mask-origin

mask-size

mask-type

mask-composite

 

基本语法

mask : url( ) // 可使用图片，或者SVG图形来做遮罩层

-webkit-mask : url() //  chrome

mask : linner-gradient(90deg