使用css使用颜色部分填充svg/png

我是CSS HTML新手。我正试图用CSS来做以下事情。我有一个png图标。现在我想用颜色从下到上部分填充它，就像图片的链接一样

---

您是否正在尝试实现这样的目标？ 我在pin中插入了一个div（表示填充），并将

位置

属性设置为

绝对

。此外，我还将父级

div

的

position

属性更改为

relative

，现在您可以将填充绝对值与其父级对齐

body，
html{
身高：100%；
}
身体{
背景：#2f；
}
.别针{
宽度：30px；
高度：30px；
边界半径：50%50%50%0；
背景：黑色；
位置：相对位置；
变换：旋转（-45度）；
左：50%；
最高：50%；
利润率：-20px0-20px；
}
.别针填充{
宽度：10px；
高度：10px；
背景：黄色；
位置：绝对位置；
边界半径：50%50%50%0；
变换：旋转（1度）；
左：0；
底部：0；
}

您是要制作动画还是只是填充？如果是动画，它是无限的吗？或在以下时间触发：悬停？请添加更多详细信息。此外，如果您正试图实现png颜色，则无法设置png颜色的动画。很抱歉，没有提供更多详细信息。我不是在尝试制作动画。它实际上是静态的。我尝试过使用css，但失败了。这是我试图将黄色标记放在黑色标记底部的css。但是做不到。使用

svg

-->谢谢！我有两个很好的解决方案：）完美！这就是我要找的！谢谢！这个答案怎么可能只有1分，解释得很好，例子也很好！