하위 요소가 상위 요소로부터 불투명도를 상속받는 이유는 무엇이며 이를 방지하려면 어떻게 해야 합니까?

하위 요소에 대한 불투명도 상속 해결

상위 요소에 불투명도를 적용할 때 하위 요소가 이 불투명도를 상속하는 문제가 발생할 수 있습니다. 하위 요소가 원래 불투명도를 유지하려는 경우 이는 바람직하지 않을 수 있습니다.

일반적인 가정과 달리 이 문제는 상속 때문만은 아닙니다. 대신 불투명도를 계산하는 방식에서 비롯됩니다. 다음 예를 고려하십시오.

<div id="parent">
    <div></div>
</div>

<div id="original"></div>

<div id="quarter"></div>

#parent div, #quarter {
    width: 100px;
    height: 100px;
    background-color: orange;
}

#parent div {
    opacity: 0.5;
}

#parent {
    opacity: 0.5;
}

#quarter {
    opacity: 0.25;
}

#quarter의 불투명도가 #parent div의 불투명도와 동일해 보일 수 있지만 #parent div는 실제로 #quarter의 불투명도의 두 배입니다. 이는 다음 바이올린에서 분명하게 드러납니다: https://jsfiddle.net/HUaNm/.

솔루션

이 문제에 대한 유일한 진정한 해결책은 물리적으로 이동하는 것입니다. 부모 외부의 자식 요소. 또는 효과는 다르지만 불투명도 대신 부모의 배경, 테두리 또는 글꼴에 rgba 색상을 사용하는 것을 고려할 수 있습니다.

위 내용은 하위 요소가 상위 요소로부터 불투명도를 상속받는 이유는 무엇이며 이를 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!