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

Question

我正在使用很棒的字体制作一些图标。我最近开始玩堆叠图标。我想实现一种效果，类似于顶部图标是底部图标的切口。这意味着他们父级的背景颜色应该通过基本图标中的 "hole" 可见。

最初，我尝试将顶部图标设置为透明，但这只会显示完整的底部图标，没有任何堆叠图标结果。

有什么办法可以实现吗，可以继承父元素的背景色，设置为顶部图标的前景色吗？

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;
}

和fiddle，（我试图使黑色"refresh"-图标与背景底色颜色相同）http://jsfiddle.net/cat9zxzt/

编辑： 我知道我可以手动将颜色添加到图标元素，但我想要的是一个通用的解决方案，它适用于我可能碰巧将这个堆叠图标放在其上的任何背景颜色。

Answer 1

只需在刷新图标中添加另一个 class，如此 Fiddle

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 green-color" style="margin-top: 6px; ">  </i>
</span>
</div>

CSS

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

.green-color{
    color: rgb(51, 179, 77);
}

Answer 2

您可以（某种程度上）设置文本颜色并使用 currentColor 作为背景。

The currentColor keyword represents the calculated value of the element's color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default.

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

JSfiddle Demo

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

Is there any way to inherit background-color from a parent element, as foreground color of child element?

html

css

font-awesome