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-mask-image: url(img/star.png);
mask-position: 0;
-webkit-mask-position: center;
mask-size: auto;
-webkit-mask-size: auto;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat; 

看完这个小例子，是不是对上面的这句话有了新的认识了 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域，其实简单来说就是一张完整的图片在使用不透明的遮罩图片后，显示出来的只有遮罩部分，图中遮罩部分是一个不透明的五角星，所以显示的是一个五角星形状

我们还可以设置mask属性为径向渐变，比如

-webkit-mask: radial-gradient(
  transparent 0%, transparent 10%,blue 10%,blue 20%,blue 20%,blue 30%,
  transparent 25%,transparent 40%,blue 40%,blue 50%,blue 50%,blue 60%,
  transparent 50%, transparent 70%,blue 70%,blue 70%,blue 70%,blue 80%,
  transparent 70%,transparent 90%,blue 90%
);