使用蒙版在图像中间切出一个洞

CSS

div {
  width: 200px;
  height: 200px;
  background: url(http://lorempixel.com/200/200/abstract/6);
  mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */
}

HTML

在上面的例子中，使用 radial-gradient 在中心创建一个透明圆圈，然后将其用作遮罩，以产生从图像中心切出的圆圈的效果。

没有面具的图像：

带面具的图像：