剪辑路径插入圆

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">