如何在CSS中使图像适合此PNG图像的形状? [英] How do I fit an image to the shape of this PNG image in CSS?

问题描述

如何在该png图像上放置图像但保持形状?在CSS中?

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

我已经看到有使用SVG剪辑路径执行此操作的方法，但是我想知道是否可以通过将其设置为背景图像或其他方式来实现更快速的操作?

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.

推荐答案

这是遮罩的目的:

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

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

这篇关于如何在CSS中使图像适合此PNG图像的形状?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！