我正在尝试根据 HTML 元素内的图像剪辑 HTML 元素。
我该怎么做呢？我一直在搜索计算器，但找不到答案。
这是更深入的描述，我的代码是这样设置的。
<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，我正在研究是否有办法剪辑容器。
最佳答案
如果旧版浏览器支持不适合您，那么我建议使用 css mask .可以在此 codepen 中找到使用示例.主要区别在于掩码图像 url 从 html 标记移动到 css mask-image 规则中，但这应该不是问题。如果current state of support跨浏览器是不够的，然后需要使用 svg 过滤器。
请注意，掩码功能需要 webkit 浏览器中的供应商前缀(codepen 配置为运行 autoprefixer，一定要这样做)
关于html - 基于图像裁剪父 HTML 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54755169/