使用蒙版在影象中間切出一個洞

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 在中心建立一個透明圓圈，然後將其用作遮罩，以產生從影象中心切出的圓圈的效果。

沒有面具的影象：

帶面具的影象：