在 png 中放置阴影给框阴影效果

如何解决在 png 中放置阴影给框阴影效果

我试图给我的 png 图像一个阴影，但每次我尝试这样做时，我都会得到一个矩形框阴影。谁能解释一下我做错了什么。以下是参考代码：-

JS 代码：-

function Firstheading(){
    return(
    <div>
        <div className = "row">
            <div className = "column1">
                <h1>I<br/>AM<br/>HRITIK</h1>
            </div>  
            <div className="column2">
                <img className = "myPic" src={myPic} />
            </div>     
        </div>
    </div>
    );   
}

CSS:-

.myPic {
  height: 577px;
  width: 432px;

  padding-top: 10px;
  filter: drop-shadow(0 0 0.75rem crimson);
}

请注意，图片非常不规则。

Edit1：是的，我的图像是透明的。我用 photopea 自己编辑了它，如果照片有问题，我怎么知道，如果有人有任何线索，请分享。

Edit2：我正在将图片添加到我的问题中，希望我做对了。 img

解决方法

你的 CSS 工作正常，我建议还有其他事情发生，也许是你的 JS/React

img {
  filter: drop-shadow(0 0 0.75rem crimson);
}

<div>
  <img src="https://i.stack.imgur.com/F5ZXq.png" alt="" />
</div>