Html 使用CSS在透明图像上着色

我有一个白色的透明背景的图像；我希望能够动态地将悬停时的图像上色/上色到另一种颜色

我的第一个想法是使用

背景混合模式

来

将一个纯红图像与我的白色透明图像相乘，得到一个红色透明图像。不幸的是，这并没有给出所需的行为，而是给了我一个实心的红色框。示例如下：

我已经研究了CSS
mask
，但这似乎也没有达到我想要的效果。如何轻松地将白色图像转换为彩色图像

谢谢大家!
 有一种方法，但有点奇怪

filter: brightness(0.5) sepia(1) hue-rotate(50deg)

更改亮度和色调旋转，直到获得所需颜色。
您可以尝试在伪元素上使用
混合模式。我在下面的示例中使用了
乘法
和
屏幕


document.getElementById（'c'）。addEventListener（'change'，（e）=>{
常量模式=e.target.checked？'screen'：'multiply'；
document.documentElement.style.setProperty（'--blend mode'，mode）；
})
：根目录{
--混合模式：倍增；
}
#容器{
位置：相对位置；
背景：黑色；
宽度：100%；
高度：250px；
边缘底部：2rem；
}
#星座{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：250px；
高度：250px；
背景：url（“https://storage.googleapis.com/astrology-images/constellations/aries-white.png");
}
#星座：之后{
内容：''；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
背景：红色；
混合混合模式：var（--混合模式）；
}

红色背景
所有背景图像都是白色的吗？

您可以将默认图像更改为红色版本，然后对其应用一些
过滤器
，使其变为白色。
由于他的图像是白色的，
色调旋转
什么都不做。有没有办法通过这种方式获得特定的颜色？
sepia
是什么颜色？这里的功能部件是
mix-blend mode:multiply
吗？我在我的JSFIDLE中尝试了这一点，但它似乎不起作用：-该属性应用于悬停时显示的伪元素。您应该能够将伪元素的背景颜色更改为您需要的任何颜色；它们都是白色的——我希望它们能够改变为不同的颜色（红色、蓝色、绿色等），所以从红色->白色对我没有帮助。但是你可以将红色（#FF0000）转换为其他许多颜色。这个游乐场可能有助于为每个需要的颜色获得正确的配置。只需更改“背景图像”文本区域中的CSS。您是否忘记了链接？是的，对不起：（只需将
#color wheel{Background color:…}
更改为默认颜色。）