html - How do I fit an image to the shape of this PNG image in CSS?

Question

How do I fit an image over this png image but keep the shape? in CSS?

I've seen there is ways to do this with SVG clip path but I was wonder if there was a quicker way by just setting it as a background image or something?

thanks, sorry if it's a stupid question.

Answer 1

this is the purpose of mask:

img {
  -webkit-mask:url(https://i.ibb.co/mBrmH0k/Mf15d.png) center/contain no-repeat;
}

<img src="https://picsum.photos/id/1079/200/200">
<img src="https://picsum.photos/id/1069/200/200">