css - 剪辑路径插入圆

Question

我有一个方形图像，想将其切成圆形以查看后面的内容(实际上是 body 背景图像)。我找到了 clip-path CSS 属性，但我只是用图像创建一个圆圈，而不是创建一个被图像包围的圆圈。

到目前为止，我的背景是白色的，所以我刚刚创建了一个白色的 ::after 元素，带有插入框阴影，但现在我得到了背景图像，所以我无法保留那个。

有没有一种带或不带剪辑路径的方法来实现这一点？

PS:最终目标是制作一个旋转的音乐黑胶唱片，所以这个中间的孔是必要的! :)

谢谢。

Answer 1

您可以使用mask而不是clip-path来做到这一点

img {
  border-radius:50%;
  -webkit-mask:radial-gradient(farthest-side,transparent 15%,#fff 16%);
          mask:radial-gradient(farthest-side,transparent 15%,#fff 16%);
}

body {
  background:linear-gradient(to right,gray,yellow);
}

<img src="https://i.picsum.photos/id/1003/400/400.jpg">