如何使用CSS从Photoshop提取的非几何形状中着色？

Question

我有一幅人手轮廓的图像（从Photoshop中提取），我正按照指定的百分比从左到右进行着色。 例如，有时我可能只希望从左到右以某种颜色填充整个图像的30％。

问题是，当我尝试从左到右着色时，我也会在形状外部的区域中着色。 看起来形状是包含在某种矩形中的，即使它们是使用Photoshop专门提取的，没有任何外部容器。

这是我到目前为止最接近的内容：

 .pic { background: linear-gradient(to right, red 50%, white 50%); } 

 <div class="pic" > <img class = "image" height= "100%" width = "100%" src="http://i57.tinypic.com/2h5mmom.png"/> </div> 

Answer 1

图像是矩形。

您可以用页面的背景色（即白色）填充图像外部轮廓的外部，使轮廓内部保持透明。 然后，填充.pic的背景色将仅在图像的透明区域显示。

Answer 2

图像是一个矩形，要使用PNG进行所需的操作，您需要使轮廓的外部颜色与页面的其余部分匹配，并且内部透明。 这样，您将获得所需的效果。