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

Question

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

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

我尝试申请 z-index Font Awesome <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 完成同样的事情(比父级“高”一层)。

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