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

Question

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

目标：让图标因重叠而失去亮度。

我尝试将z-index应用于font-awesome <i>，但没有运气：SQL.zoo Problem#13

现在看起来如何/我希望如何：

https://jsfiddle.net/zencd/62psvfos/

Answer 1

只需使图标相对定位：

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

相关变化：

=sortletter(A1)

要改进现有代码，您不需要在i { position: relative; } 上提供z-index，并且z索引是相对的。而不是像.block那样设置疯狂的z-index数字，使用1000完成同样的事情（1层＆＃34;比父母更高＆＃34;）

1

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>