> 웹 프론트엔드 > CSS 튜토리얼 > 겹쳐진 반투명 상자가 순서에 따라 색상이 다른 이유는 무엇입니까?

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

Susan Sarandon
풀어 주다: 2024-12-09 22:06:19
원래의
601명이 탐색했습니다.

Why Do Stacked Semi-Transparent Boxes Show Different Colors Depending on Their Order?

겹쳐진 반투명 상자는 순서에 따라 색상 변화를 나타냅니다

두 개의 반투명 상자를 쌓을 때 관찰되는 최종 색상은 다음에 따라 다릅니다. 정리 순서. 이러한 현상은 경우에 따라 색상 조합이 다르기 때문에 발생합니다.

색상 차이 설명

첫 번째 경우 상단 상자(불투명도 50%)에 다음이 포함됩니다. 파란색이며 하단 상자가 50% 빨간색을 차지하도록 허용합니다. 따라서 전체 색상은 파란색 50%와 빨간색 25%의 조합입니다(빨간색의 나머지 50%가 파란색에 가려지므로).

그러나 두 번째 경우에는 상자가 반전됩니다. 이제 위쪽 상자의 빨간색 불투명도는 50%이고 아래쪽 상자의 파란색 색상은 50%입니다. 전체적인 효과는 빨간색 50%와 파란색 25%의 다른 조합입니다. 비율이 동일하지 않기 때문에 색상이 다르게 나타납니다.

색상 일관성 확보

박스 순서에 관계없이 동일한 색상을 얻으려면 각 레이어의 색상 비율을 동일해야 합니다. 즉, 상단 레이어는 하단 레이어의 색상과 동일한 비율을 통과하도록 허용해야 합니다.

예를 들어 다음 설정을 고려하세요.

  • 상단 레이어: 불투명도 25% (0.25) 파란색
  • 하단 레이어: 불투명도 33.3%(0.333) 빨간색

이 시나리오에서는 두 레이어 모두 다른 색상의 25%를 비춰줍니다. 따라서 순서에 관계없이 결과 색상은 동일합니다(파란색 25%와 투명 75% 혼합).

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿