하위 요소에 영향을 주지 않고 상위 요소에 불투명도를 적용하려면 어떻게 해야 합니까?

하위 요소에 영향을 주지 않고 상위 요소의 불투명도

원래 질문에서는 해당 요소의 불투명도에 영향을 주지 않고 상위 요소에 불투명도를 적용하는 솔루션을 모색했습니다. 자식 요소. 기본적으로 상위 요소에 적용된 불투명도는 모든 하위 요소에도 영향을 미치기 때문에 이는 어려울 수 있습니다.

그러나 일반적으로 사용되는 기술에는 CSS의 rgba() 함수를 활용하는 것이 포함되어 있습니다. 불투명도 값입니다. 원하는 결과를 얻으려면 투명한 불투명도 값으로 rgba()를 사용하여 상위 요소의 배경색을 설정할 수 있습니다. 예:

.parent {
  background-color: rgba(0, 0, 0, 0.5);
}

이 예에서 상위 요소는 50% 투명한 검정색 배경을 가지지만 하위 요소는 영향을 받지 않고 아래에 설명된 대로 원래 색상을 유지합니다.

<div class="parent">
  <div class="child">Hello, I am a child</div>
</div>

위 내용은 하위 요소에 영향을 주지 않고 상위 요소에 불투명도를 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!