Clip-path 内嵌圆圈

Question

我有一张正方形的图片，想在中间剪一个圆形，看看后面是什么（实际上是 body background-image）。我找到了 clip-path CSS 属性，但我只是为了用图像创建一个圆而不是创建一个被我的图像包围的圆。

直到现在我有一个白色背景，所以我只是创建了一个 ::after 元素白色，带有一个插图 box-shadow 但现在我有一个背景图像所以我不能保留它.

有或没有 clip-path 的方法可以实现吗？

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

Clip-path 内嵌圆圈

Clip-path inset circle

css

geometry

vinyl

clip-path