Html 如何使用CSS对从Photoshop提取的非几何图形进行着色？

我有一张从Photoshop中提取的人们手牵手的轮廓图，我正试图根据指定的百分比从左到右着色。例如，有时我可能只希望从左到右填充整个图像的30%，并使用特定的颜色

问题是，当我尝试从左到右着色时，我最终也会在形状之外的区域着色。这些形状似乎包含在某种矩形中，尽管它们是使用Photoshop在没有任何外部容器的情况下特别提取的

这是我迄今为止最接近的一次：

.pic{
背景：线性梯度（向右，红色50%，白色50%）；
}

图像是矩形

---

您可以使用页面的背景色（即白色）填充图像中轮廓的外部，使轮廓的内部保持透明。然后，填充

.pic

的背景色只会通过图像的透明区域显示。

图像是一个矩形，要使用PNG实现您想要的功能，您需要使轮廓的外部具有与页面其余部分匹配的颜色，而内部是透明的。这样您将达到预期效果。

最好使用SVG，而不是CSS。谢谢。我在Photoshop中修复了图像，所以只有形状是透明的。谢谢。我在Photoshop中修复了图像，因此只有形状是透明的。