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

Question

我有下面两张图片，如下所示。

图片 1

图像 2

我想用 css 合并这两个图像，并期望如下图所示。

预期图像

请帮我设置这样的图像。

我尝试使用 Clip-path 但什么也没得到:

div {
  background:url(/image/zzeP9.png);
  background-size:contain;
  height:200px;
  clip-path:url(/image/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="/image/zzeP9.png" >