ZHENG Zi'ou

上一期说到想给网站图标的图片加个蒙版，然而没有成功。那么网页中的图片么？经常看到个人图片都是圆形的，然而实际上上传的原图是方的。如果使用了蒙版功能，就可以对同一张图想怎么变形状就怎么变了。

首先，定义一个类，比如avatar，在css文件中定义该类使用了某长图片蒙版：

.avatar {
  border-radius: 50%;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  max-width: 50px;
  -webkit-mask-image: url(/img/mask/circle.svg);
  mask-image: url(/img/mask/circle.svg);
}

其中高亮的两句定义了蒙版的图片。在这里，蒙版我使用的是font awesome里的圆形图，就长下面这个样子：

在实际使用时，只需要在<img>标签中使用该类即可，如：

<img class="avatar" src="img/avatar.png" width="40" height="40" class="d-inline-block align-top" alt="" />

版本控制