html - 剪辑路径背景图像

假设我将上面的图像作为 div 的背景。我可以将这个 div 中的所有内容剪辑到图像的边界吗？

我已经搜索并找到了我认为最合适的剪辑路径方式，但我不知道如何定义该图像的路径。我曾想过用 Canvas 制作它，但问题是这个 div 中的元素。

如果有人对这种员工有一些经验，我将非常感谢您的帮助

最佳答案

There are tools out there 可以帮助创建剪辑路径。

这是我用 demo 制作的(相当粗糙的) this tool :

div {
  width: 250px;
  height: 400px;
  float: left;
  background: tomato;
  -webkit-clip-path: polygon(74.67px 148.00px,105.00px 244.24px,145.67px 315.35px,181.33px 324.47px,159.67px 295.47px,149.50px 218.74px,172.33px 155.00px,165.17px 82.00px,132.00px 10.00px,68.83px 72.00px);
}

<div></div>

关于html - 剪辑路径背景图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26697760/