使字体超棒的图标不受其他元素的半透明背景影响

Question

这里是重叠块。每个都有半透明的背景和里面的 font-awesome 图标。

目标：使图标不会因为重叠而失去亮度。

我尝试将 z-index 应用于超棒的字体 <i>，但没有成功：https://jsfiddle.net/zencd/62psvfos/

它现在的样子/我想要它的样子：

Answer 1

只需将图标相对定位即可：

https://jsfiddle.net/Kredit/62psvfos/1/

相关变更：

i {
    position: relative;
}

要改进现有代码，您无需在 .block 上提供 z-index，并且 z-index 是相对的。与其像 1000 这样设置疯狂的 z-index 数字，不如使用 1 完成同样的事情（比父层 "higher" 一层）。

.block {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: rgba(240, 200, 200, 0.8);
    text-align: center;
}

i {
    z-index: 1;
    position: relative;
    outline: 1px dashed black;
}

Answer 2

设置相对于 i 个元素的位置

body { background: white; }
.block {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: rgba(240, 200, 200, 0.8);
  text-align: center;
  z-index: 10;
}
.block2 {
  position: relative;
  top: -55px; left: 20px;
}
i {
  z-index: 1000;
  outline: 1px dashed black;
  position: relative;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="block">
<i class="fa fa-camera-retro fa-2x"></i>
</div>

<div class="block block2">
<i class="fa fa-camera-retro fa-2x"></i>
</div>

使字体超棒的图标不受其他元素的半透明背景影响

Make font-awesome icon not affected by other element's semi-opaque background

css

font-awesome