假设我有上面的图像作为div的背景。我可以剪切这个div中的所有内容到图像的边界吗？我已经搜索并找到了我认为最合适的clip-path方法，但我不知道如何定义这个图像的路径。我曾想过用canvas来做，但问题是这个div中的元素。如果有人对这种员工有经验的话，我会非常感激你的帮助。
yxyvkwin1#
有一些工具可以帮助创建剪辑路径。下面是一个（相当粗糙的）demo，它是我用this tool创建的：第一个
2jcobegt2#
使用CSS Shapes应该是可能的。不幸的是，浏览器支持还没有（它只在Safari和Chrome上工作），所以你可能需要一个polyfill。我已经添加了一个小代码片段，展示了它如何使用你的图像工作。注意，由于CORS问题，我不得不使用data-uri内联图像。第一个
3zwjbxry3#
如果你想了解如何使用clip-path，你可以在这里学习：http://css-tricks.com/almanac/properties/c/clip/这里是：http://www.html5rocks.com/en/tutorials/masking/adobe/"或者在这里用发电机"http://cssplant.com/clip-path-generator
yacmzcpb4#
根据您的情况和div内部的功能，您也可以在父div上使用mask。如果我没有理解错的话，它会按照您的要求工作，但它实际上不会像clip-path那样剪切内容。https://developer.mozilla.org/en-US/docs/Web/CSS/mask
4条答案
按热度按时间yxyvkwin1#
有一些工具可以帮助创建剪辑路径。
下面是一个（相当粗糙的）demo，它是我用this tool创建的：
第一个
2jcobegt2#
使用CSS Shapes应该是可能的。不幸的是，浏览器支持还没有（它只在Safari和Chrome上工作），所以你可能需要一个polyfill。
我已经添加了一个小代码片段，展示了它如何使用你的图像工作。注意，由于CORS问题，我不得不使用data-uri内联图像。
第一个
3zwjbxry3#
如果你想了解如何使用clip-path，你可以在这里学习：http://css-tricks.com/almanac/properties/c/clip/
这里是：http://www.html5rocks.com/en/tutorials/masking/adobe/
"或者在这里用发电机"
http://cssplant.com/clip-path-generator
yacmzcpb4#
根据您的情况和div内部的功能，您也可以在父div上使用mask。如果我没有理解错的话，它会按照您的要求工作，但它实际上不会像clip-path那样剪切内容。
https://developer.mozilla.org/en-US/docs/Web/CSS/mask