css属性mask使用实践(上)

前言

最近在浏览技术文章的时候，发现一个没有用过的CSS属性，刚开始以为很简单，但是当我深入了解后发现，这个属性很不简单，在这里记录一个学习的过程。

mask相关

CSS属性mask的作用是 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域，什么意思呢，不急，咱们慢慢来

mask 相关的属性有很多，如下：

• mask-image
• mask-mode
• mask-repeat
• mask-position
• mask-clip
• mask-origin
• mask-size
• mask-composite

属性介绍

我们使用下面这两张图片来验证这个属性

<div class="main"></div> 

width: 900px;
height: 400px;
background: url("img/22.jpeg") 100% no-repeat;
mask-image: url(img/star.png);
-webkit-ma