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

剪切路径插入圆

1 个答案: