根据图片剪切父HTML容器

Question

我正在尝试基于HTML元素内的图像剪切HTML元素。

我该怎么做？我一直在搜索stackoverflow，找不到答案。

这里有更深入的描述，我的代码设置如下。

<div class="container">
<img src='image.png'/>
<img src='secondimage.png'/>
</div>

.container {
    width: 400px;
    height: 200px;
    left: 10px;
    top: 5px;
    position: absolute;
    overflow: hidden;
}

我想让html div容器采用image.png中的自定义形状。 image.png不仅是多边形或矩形之类的基本形状，而且是有机形状。

我正在研究是否可以使用clipPath来裁剪容器。

Answer 1

如果较旧的浏览器支持不适合您，那么我建议您使用css mask。可以在此codepen中找到用法的示例。主要区别在于，遮罩图像url已从html标记移至css mask-image规则中，但这不应该成为问题。如果跨浏览器的current state of support不足，则需要使用svg过滤器。 请注意，掩码功能需要Webkit浏览器中的供应商前缀（代码笔配置为运行自动前缀，请确保执行相同操作）