CSS背景透明度不影響使用LESS的子元素

Question

我在互聯網上發現了很多解決方案，Stackoverflow並嘗試過，但沒有任何東西不能解決我的問題。我在我的網站上使用FontAwesome和LESS，但是當我添加字體圖標時，它受到父元素的不透明度（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; 
    }