基于图像裁剪父 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 浏览器中的供应商前缀（codepen 配置为运行 autoprefixer，请务必这样做）