z-index和堆叠顺序

Question

<div class="card-body" style="opacity:0.99;"> <!-- stacking context’s root element [![enter image description here][1]][1]-->
  <h5 style="padding-left:60px;position:relative;z-index:10;" class="card-title"><!-- stacking order: 1 -->
    <i style="position:absolute;font-size:60px;color:red;top:-10px;left:-10px;" class="fa fa-play-circle-o" aria-hidden="true"></i> Video Title
  </h5>
  <div class="card-details-1 clearfix" style="position:relative;z-index:20;"><!-- stacking order: 2 -->
    <div>
      <span class="card-date float-left">19.02.17</span>
      <a class="card-username float-right" href="#">Username</a>
    </div>
  </div>
  <div class="card-details-2 clearfix">
    <div>
      <span class="card-duration float-left">7:56 min</span>
      <span class="card-votes float-right">20 Votes</span>
    </div>
  </div>
  <a class="card-btn" href="#">View Video</a>
</div>

1. 我已将{1,0}的不透明度值应用于div.card-body，以便形成新的堆叠上下文。

2. h5和div.card-details-1已定位且具有z-index值。

为什么我无法获得图片中显示的黑色效果？