CSS背景透明度，不使用LESS影响子元素

Question

我在互联网上找到了很多解决方案，Stackoverflow并试过但没有什么不能解决我的问题。我在我的网站上使用FontAwesome和LESS但是当我添加了font-icon时，它受到父元素的不透明度（rgba）的影响。这是我的代码：

http://codepen.io/thehung1724/pen/Lxjcl

希望有人能帮助我。提前谢谢。

Answer 1

删除之前!!!在您的代码笔中我删除了之前并将样式应用于图标容器。然后父母的背景颜色保持透明度，图标不！ ：）

  .icon-container{

  &:before{
    width: 50px;
    height: 50px;
    position: absolute;
    content: "";
    left: 8px;
    top: 5px;
    .rotate(45deg);
    .rgba(black, 0.4);
    z-index:1;
  }

  span{
    position:relative;
    display:block;
    z-index:2;
  }


  &:nth-child(n){
    filter: none;
  }