是否可以使用 css 将两个图像合并为一个形状？

Question

我有两张如下图。

图片 1

图 2

我想将这两张图片与 css 合并，希望像下图这样。

预期图像

请帮我设置这样的图片。

我尝试使用 clip-path 但什么也没得到：

div {
  background:url(https://i.stack.imgur.com/zzeP9.png);
  background-size:contain;
  height:200px;
  clip-path:url(https://i.stack.imgur.com/PkKi6.png)
}

<div ></div>

提前致谢。

Answer 1

这就是 mask 的用途：

img {
  -webkit-mask:url(https://i.ibb.co/sFjJtNN/PkKi6.png) center/contain no-repeat;
  max-width:100%;
}

body {
  background:pink;
}

<img src="https://i.stack.imgur.com/zzeP9.png" >

是否可以使用 css 将两个图像合并为一个形状？

Is it possible to merge two images in one shape with css?

html

css

clip-path