CSS 부모의 opacity를 자식에게 적용하지않는법!

부모박스에 opacity가 적용되어있으면, 그 자식도 영향을 받게된다.

 

예를들어 박스가 하나있고, 그 박스안에 3개의 박스를 배치하고싶은데

 

바깥 박스는 투명하게, 안쪽박스는 투명하지 않게 하고싶다.

 

그런데 이때 부모박스의 css 속성에 opacity값을 주게되면.. 안쪽박스까지 같은 투명도를 가지게된다.

 

 

 

이때 위에 보이는 아이콘들의 css속성에 opacity: 1; 값을 주어도 위와같은 상태가 그대로 유지된다..

 

하지만 이때 부모의 css에 opacity 대신

 

background-color: rgba(0, 0, 0, 0.5);

 

이처럼 rgba 로 투명도를 주게되면 원하는대로 나온다.