有没有办法从父元素继承背景颜色,作为子元素的前景色？

Question

我使用字体很棒来制作一些图标.我最近开始玩堆叠图标.我希望实现一种效果,类似于顶部图标是基本图标的剪切.这意味着它们的父级的背景颜色应该通过基本图标中的"洞"可见.

最初,我尝试将顶部图标设置为透明,但仅显示完整的基本图标,没有任何堆叠图标结果.

有没有办法实现这一点,可能是通过继承父元素的背景颜色,并将其设置为顶部图标的前景色？

HTML:

<div class="square">
    <span class="fa-stack ">
      <i class="fa fa-file fa-stack-2x fa-inverse"></i>
      <i class="fa fa-refresh fa-stack-1x " style="margin-top: 6px; "></i>
    </span>
</div>

CSS:

.square{
    background-color: rgb(51, 179, 77);
    width: 32px; 
    height: 32px;
}

小提琴,(我试图让黑色"刷新" - 与背景基础颜色相同)http://jsfiddle.net/cat9zxzt/

编辑: 我知道我可以手动将颜色添加到图标元素,但我想要的是一个通用的解决方案,可以使用任何背景颜色,我可能碰巧把这个堆叠图标放在上面.

Answer 1

您可以通过设置文本颜色(currentColor用于背景)来进行排序.

currentColor关键字表示元素的color属性的计算值.它允许使属性或子元素属性继承的颜色属性默认不继承它.

.square {
    color: rgb(51, 179, 77); /* text color */
    background-color: currentColor; /* equals current text color */
    width: 32px;
    height: 32px;
}

JSfiddle演示