和层叠上下文相关的有趣现象实例页面

展示

代码

• HTML：

  <div class="box">               
      <span class="text">只有图片淡出，文案一直100%透明</span>
      <img class="fade" src="1.jpg">
  </div>

• CSS：

  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  .box {
    width: 256px; height: 192px;
    position: relative;
  }
  .text {
    line-height: 30px;
    position: absolute; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,.5);
    color: #fff;
    text-align: center;
    font-size: 14px;
  }
  .fade {
    animation: fadeIn 2s 2s infinite; 
  }