剪辑路径插入圆答案

【问题标题】：Clip-path inset circle剪辑路径插入圆
【发布时间】：2020-03-20 18:44:15
【问题描述】：

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

到目前为止，我的背景是白色的，所以我只是创建了一个 ::after 元素白色，并带有一个嵌入的框阴影，但现在我得到了一个背景图像，所以我不能保留它。

有没有办法使用或不使用剪辑路径来实现这一目标？

PS：最终目标是制作音乐黑胶旋转，所以这个中间孔是必须的！ :)

谢谢。

【问题讨论】：

是的，有可能，分享一些代码

标签： css geometry clip-path vinyl

【解决方案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);
}

&lt;img src="https://i.picsum.photos/id/1003/400/400.jpg"&gt;

【讨论】：

为什么是farthest-side？我尝试了circle at 50% 50%，得到了相同的结果。
@dgknca farthest-side 让我可以更好地控制颜色百分比。 100% 的颜色将是元素的边缘，而使用 circle at 50% 50%（与 circle 相同）我需要使用大约 66%，这不是微不足道的：jsfiddle.net/7d6mck8o
@dgknca 规范中的相关部分：drafts.csswg.org/css-images-3/… 以及带有许多径向梯度示例的相关 asnwer：stackoverflow.com/a/57218554/8620333
感谢您提供信息丰富且深入的回答。