내 자식 div의 불투명도는 부모로부터 상속을 유지합니다. 어떻게 그 행동을 멈출 수 있습니까?

나는 <div id="icon-menu">이 여전히 조상 인 <div class="box">과 같은 불투명도를 갖는 이유를 간단히 알 수 없습니다. 내가 아는 한, CSS 특이성에 따르면, 그렇게해서는 안된다. 내 자식 div의 불투명도는 부모로부터 상속을 유지합니다. 어떻게 그 행동을 멈출 수 있습니까?

<div class="jumbotron">  
    <div class="box"> 
     <div id="icon-menu" style="opacity: 1"> 
      <i class="fa fa-bars"></i> 
      Menu 
     </div> 
    </div> 
</div>

이

내 CSS입니다 : 당신이 볼 수 있듯이

.box { 
    background-color: #000000; 
    height: 60px; 
    min-width: 100%; 
    opacity: 0.5; 
} 

#icon-menu { 
    opacity: 1; 
    padding-left: 75px; 
    position: fixed; 
    color: #ffffff; 
    font-size: 40px; 
}

, 나는 다시 1로 <div id="icon-menu:>의 불투명도를 변경하는 몇 가지 방법을 시도했지만 아무 효과가 없습니다. 뭐가 잘못 됐는지 알아?

출처

2014-10-13 Peter

아이가 될 수 없다 부모보다 불투명합니다. –

어린이는 부모의 불투명도에 영향을받습니다. 가능한 [부모 div 투명한 배경을 복제 할 수 있지만 자식 div 투명성에 영향을주지 않음] (http://stackoverflow.com/questions/5148128/parent-div-transparent-background-but-not-affect-child-div-transparency) – showdev

가능 [나는 CSS의 부모로부터 자식 불투명도를 상속하고 싶지 않다]의 복제본 (http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from) -the-parent-in-css) –

당신이 하위 요소 불투명 부모보다 더 만들 불투명도를 사용할 수 있지만, 당신은 당신이 원하는 것을 할 RGBA 색상을 사용할 수 있습니다

.box { 
    background-color: rgba(0, 0, 0, .5); 
    height: 60px; 
    min-width: 100%; 
} 
#icon-menu { 
    background-color: rgba(0, 0, 0, 1); 
    padding-left: 75px; 
    position: fixed; 
    color: #ffffff; 
    font-size: 40px; 
}

jsFiddle example

출처

2014-10-13 20:18:38 j08691

감사합니다. – Peter