CSS 부모의 opacity를 자식에게 적용하지않는법!
2020. 12. 31.
부모박스에 opacity가 적용되어있으면, 그 자식도 영향을 받게된다. 예를들어 박스가 하나있고, 그 박스안에 3개의 박스를 배치하고싶은데 바깥 박스는 투명하게, 안쪽박스는 투명하지 않게 하고싶다. 그런데 이때 부모박스의 css 속성에 opacity값을 주게되면.. 안쪽박스까지 같은 투명도를 가지게된다. 이때 위에 보이는 아이콘들의 css속성에 opacity: 1; 값을 주어도 위와같은 상태가 그대로 유지된다.. 하지만 이때 부모의 css에 opacity 대신 background-color: rgba(0, 0, 0, 0.5); 이처럼 rgba 로 투명도를 주게되면 원하는대로 나온다.