lottie
Seungjun's blog
blog
부모의 opacity가 자식에게 영향을 미치지 않게 하는법

CSS에서 opacity 속성은 부모 요소에서 자식 요소로 상속되지 않는다. 그러나, 부모 요소의 opacity는 그 안에 있는 모든 자식 요소들에게 영향을 미친다. 이는 opacity가 부모 요소와 그 내용물 전체를 대상으로 적용되기 때문이다.


부모 태그의 투명도를 변경하면서 자식 태그에게는 영향을 주지 않으려면, 보통 배경색에 대한 투명도만 조정하는 방법이 있다. 이를 위해 RGBA(Red Green Blue Alpha) 색상 값을 사용할 수 있다.


예를 들어, 아래와 같이 CSS 코드를 작성하면 부모 태그의 배경색만 투명하게 만들 수 있다.~~~~

.parent {
  background-color: black;
  opacity: 50%; 
  /* 자식 전부 50% 투명도로 설정 */
}

.parent {
  background-color: rgba(0, 0, 0, 0.5); 
  /* 배경만 50% 투명도로 설정 */
}
~~~~