网页游戏，怎么让<img>或者<div>矩形中，角色外的部分透明？

以2d游戏为例，角色做成一个图片，问题来了，图片都是矩形，要引用图片用img或者div标签，也是个矩形。图片里的人物大致有个轮廓，而轮廓以外的颜色并不能很好的融入场景。可能的效果会是这样：



怎么把矩形图片中女生以外的那部分透明化？直接用div或者img标签能否实现。自己设计一个教师色也有这个问题，你的画图程序有一个背景色，通常是白色，单独作为图片看，没什么问题，但是放在游戏场景里，就很不协调了。