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 Demo

Answer 2

只需在刷新图标中添加另一个类，如此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);
}

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

2 个答案: