css - 剪辑路径插入圆

Question

我有一个方形图像，想用圆形将它剪成中间，看看后面是什么（实际上是一个身体背景图像）。我找到了clip-pathCSS 属性，但我只是用图像创建一个圆圈，而不是创建一个由我的图像包围的圆圈。

直到现在我有一个白色的背景，所以我只是创建了一个::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">