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

Question

I am using font awesome to make some icons. I've most recently started playing with stacked icons. I want to achieve an effect, similar to the top icon being a cut-out of the base icon. Meaning that the background color of their parent should be visible through the "hole" in the base icon.

Initially, I tried to set the top Icon to be transparent, but that only revealed the full base icon, with no stacked icon result whatsoever.

Is there a way to achieve this, maybe by inheriting the parent element's background color, and setting it as the foreground color of the top Icon?

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

And fiddle, (where I am trying to make the black "refresh"-icon the same color as the background base) http://jsfiddle.net/cat9zxzt/

EDIT: I know I could just add the color to the icon element manually, but what I would like, is a generic solution that would work with any background color that I might happen to put this stacked icon on top of.

Answer 1

You can (sort of) by setting the text color and using currentColor for the background.

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