剪切路径插入圆

Question

我有一个正方形的图像，想用圆形将其切成中间，以查看后面的内容（实际上是人体背景图像）。我找到了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">