겹쳐진 반투명 상자가 순서에 따라 색상이 다른 이유는 무엇입니까?

겹친 반투명 상자의 색상 인식

두 개의 반투명 상자를 겹겹이 쌓았을 때 결합된 상자의 색상 인식 레이어는 배열된 순서에 따라 달라집니다. 이 현상의 원인을 이해하기 위해 CSS의 불투명도 개념을 자세히 살펴보겠습니다.

불투명도는 요소의 투명도를 0(완전 투명)부터 1(완전 불투명)까지 정의합니다. 주어진 예에서 반투명 상자에 대한 CSS는 불투명도를 0.5로 정의하여 각 레이어의 투명도가 50%임을 나타냅니다.

빨간색 배경의 레이어가 파란색 배경 위에 배치된 경우 , 눈은 아래쪽 레이어의 50% 파란색과 위쪽 레이어의 25% 빨간색 조합을 인식합니다. 상위 레이어의 투명도가 50%이므로 하위 레이어 색상의 절반이 비쳐보이기 때문입니다.

그러나 순서를 반대로 하면 파란색 배경이 위에 오고, 눈은 50% 빨간색 조합을 만나게 됩니다. 맨 아래 레이어에서는 파란색이고 맨 위 레이어에서는 파란색이 25%입니다. 비율의 변화로 인해 인식되는 색상이 달라집니다.

일관된 색상 달성

상자가 쌓인 순서에 관계없이 동일한 인식 색상을 보장하려면 두 레이어 모두에 대해 동일한 색상 비율을 유지하는 것이 필요합니다. 제공된 예에서는 다음과 같이 불투명도 값을 조정하여 이를 달성할 수 있습니다.

내부 레이어의 경우(단색 포함):

opacity: 0.25;

외부 레이어의 경우(단색 포함) 반투명 색상):

opacity: 0.333;

이러한 조정을 통해 두 레이어 모두 동일한 25% 색상 강도를 갖게 되므로 관계없이 동일한 인식 색상이 됩니다. 쌓인 순서대로.

위 내용은 겹쳐진 반투명 상자가 순서에 따라 색상이 다른 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!