상위 요소에 불투명도를 적용하는 동안 하위 요소의 불투명도를 유지하는 방법은 무엇입니까?

상위 요소에 적용하는 동안 하위 요소의 불투명도 유지

상위 요소에 불투명도를 적용하면 불투명도 속성이 해당 하위 요소에 상속됩니다. . 그러나 특정 시나리오에서는 특정 하위 요소에 대해 상속된 불투명도를 "취소"하는 것이 바람직할 수 있습니다.

불투명도 상속은 HTML 및 CSS의 기본 동작입니다. 하위 요소의 불투명도가 1로 설정된 경우 하위 요소에 대한 후속 불투명도 선언에도 불구하고 항상 상위 요소의 불투명도를 상속합니다.

해결책

상속된 불투명도를 완전히 취소할 수는 없지만 유사한 효과를 얻을 수 있는 대체 접근 방식이 있습니다.

• 하위 요소 이동 ارج من الوالد: 상위 요소의 DOM 계층 구조가 더 이상 상위 요소의 불투명도를 상속하지 않습니다.
• RGBa 색상 사용: 불투명도를 적용하는 대신 상위 요소의 배경, 테두리 또는 텍스트에 rgba 색상을 사용하세요. . RGBA 색상을 사용하면 하위 요소의 불투명도에 영향을 주지 않고 투명도를 지정할 수 있습니다.

예

다음 코드를 고려하세요.

<code class="html"><div class="parent">
  <div class="child"></div>
</div></code>

<code class="css">.parent {
  opacity: 0.6;
}</code>

이 예에서 하위 요소는 상위 요소의 불투명도 0.6을 상속합니다.

이 상속을 "취소"하려면 상위 요소 배경에 rgba 색상을 사용할 수 있습니다.

<code class="css">.parent {
  background-color: rgba(255, 165, 0, 0.6);
}</code>

이것은 상위 요소의 배경은 반투명이 되지만 하위 요소는 완전히 불투명하게 유지됩니다.

위 내용은 상위 요소에 불투명도를 적용하는 동안 하위 요소의 불투명도를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!