剪辑路径插入圆

Nav*_*lex 2 css geometry vinyl clip-path

我有一个方形图像,想将其切成圆形以查看后面的内容(实际上是身体背景图像)。我找到了clip-pathCSS 属性,但我只是用图像创建一个圆圈,而不是创建一个被我的图像包围的圆圈。

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

有没有一种带或不带剪辑路径的方法来实现这一目标?

PS:最终的目标是制作一个旋转的音乐黑胶唱片,所以这个中间的孔是必要的!:)

谢谢。

Tem*_*fif 5

您可以使用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);
}
Run Code Online (Sandbox Code Playgroud)
<img src="https://i.picsum.photos/id/1003/400/400.jpg">
Run Code Online (Sandbox Code Playgroud)

  • @dgknca 最远一侧让我可以更好地控制颜色百分比。100% 的颜色将是元素的边缘,而“circle at 50% 50%”(与“circle”相同)我需要使用大约 66%,这并不简单:https://jsfiddle.net /7d6mck8o/ (2认同)
  • 规范中的 @dgknca 相关部分:https://drafts.c​​sswg.org/css-images-3/#valdef-radial-gradient-ending-shape 以及包含许多径向渐变示例的相关 asnwer:https://stackoverflow .com/a/57218554/8620333 (2认同)