CSS에서 사용할 수 있는 속성 중 투명도를 적용하는 opacity 속성이 존재한다. 색 등이 너무 짙어 디자인을 해친다고 판단할 경우 적절히 투명도를 부여하여 더 수려한 디자인을 가능하게 해주는 좋은 속성이다.

그런데 opacity는 자식 요소에도 모두 적용되는 탓에, 배경만 투명하게 만들고 싶은데 그렇지 못하는 상황이 발생하곤 한다. 예전에 이 문제를 해결하기 위해서 CSS 가상 선택자 before와 after를 이용하고 position 등을 적용해서 아주 복잡하고 이해하기 어려운 방법을 사용했던 적이 있었는데, 이번 프로젝트를 진행하면서 다시 알아봤을 때는 아주 쉽고 간단한 방법으로 요 문제를 처리할 수 있다는 사실을 알았다.

1. background-color: rgba.

부모 요소가 배경이고 이 것만 투명도를 적용해야 하는 상황이라면 부모 요소의 CSS에 background-color 속성과 rgba 함수를 사용해주면 된다.

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

앞의 0, 0, 0은 RGB상의 검정색이고 뒤의 0.5는 투명도 설정에 해당한다. 이렇게 CSS 속성을 설정해주면 자식 요소는 아무런 변화를 주지않고 부모 요소만 검정색 투명 배경을 설정해줄 수 있다.

예시) 출처

그냥 opacity을 사용할 경우 자식 요소들까지 모두 투명해지지만..

background-color: rgba(0, 0, 0, 0.5);를 사용할 경우 이렇게 부모 요소만 투명하게 만들 수 있다!