对于一个投资组合网站，我正在用普通的HTML，CSS和JS与jQuery，我想有一个图像列表与我的小组中的每个人的头像. 然而，我想实现一种效果，通常情况下，化身图像会被它的纯色轮廓所取代(图1)，然后当你将鼠标悬停在图像上时，它会淡出到原来的 colored颜色 (图2).
image 1:
(solid color silouhette)
image 2:
(original image)
到目前为止，我已经通过将两张图像叠加在一起来实现了这个效果.上面的是彩色的剪影，下面的是原始图像.然后简单地使用css中的:hover Select 器来淡出顶部的图像，并显示下面的图像.
<div class="mb-player">
<img src="../Assets/Players/Test/Test_color.png" class="mb-player-color">
<img src="../Assets/Players/Test/Test_normal.png">
</div>
.mb-player {
position: relative;
height: 300px;
width: fit-content;
}
.mb-player img {
object-fit: cover;
height: 300px;
}
.mb-player-color {
z-index: 1;
transition: 0.3s;
position: absolute;
top: 0;
left: 0;
}
.mb-player:hover .mb-player-color{
opacity: 0;
transition: 0.1s;
}
然而，这意味着对于我添加的每个头像，我需要有2张图片，这意味着我最终将使用大量内存，并可能降低低端设备的性能.
因此，我想知道是否有其他解决方案可以使用代码来更改原始图像，并将其转换为自身的纯色版本(如图1所示). 我试过使用css滤色器，但它们只应用了轻微的 colored颜色 变化，并没有像我想要的那样产生纯色效果.