Javascript 如何设置CSS3形状或图标部分的颜色（字体等）？

我想使用CSS或Javascript使形状的一部分具有不同的颜色

比如,；

---

我想以编程方式更改绿色级别。

字体图标是文本。你不能用文字来做那件事

你所能做的就是绝对地将一个字符放置在另一个字符的顶部，并在顶部使用

溢出：隐藏

，根据需要的高度调整其高度以显示下半部分

像这样：

.icon {
    position:relative;
    color:#000;
    font-size:50px
}

.overlay {
    position:absolute;
    top:0;
    left:0;
    color: #f00;
    height:25px;
    overflow:hidden;
}

HTML:

<div class="icon">X<div class="overlay">X</div></div>

XX

非常感谢。工作起来很有魅力。例子：