투명도는 겹치는 반투명 상자의 최종 색상에 어떤 영향을 줍니까?

겹쳐진 반투명 상자의 색상에 투명도가 미치는 영향

여러 개의 반투명 레이어가 겹쳐지면 해당 색상이 결합하여 새로운 색상을 만듭니다. . 레이어가 쌓이는 순서에 따라 결과 색상이 달라질 수 있습니다. 상위 레이어의 불투명도가 하위 레이어의 색상에 영향을 미치기 때문입니다.

예를 들어 반투명 파란색 상자 위에 반투명 빨간색 상자를 쌓으면 다른 색상이 생성됩니다. 반투명 빨간색 상자 위에 반투명 파란색 상자가 쌓여 있습니다. 첫 번째 경우 빨간색 상자는 빛의 50%를 차단하고 파란색의 50%만 통과시킵니다. 이로 인해 더 보라색 색상이 나타납니다. 두 번째 경우에는 파란색 상자가 빛의 50%를 차단하여 빨간색의 25%만 드러냅니다. 이렇게 하면 밝은 보라색 색조가 만들어집니다.

겹친 순서에 관계없이 색상의 일관성을 유지하려면 각 레이어가 동일한 색상 비율을 차지하도록 해야 합니다. 다음은 질문에 제공된 CSS에 대한 조정 사항입니다.

.a {
  background-color: rgba(255, 0, 0, 0.333);
}

.b {
  background-color: rgba(0, 0, 255, 0.333);
}

.a > .b {
  background-color: rgba(0, 0, 255, 0.25);
}

.b > .a {
  background-color: rgba(255, 0, 0, 0.25);
}

이 수정된 예에서 상단 레이어의 불투명도(0.25)는 하단 레이어의 불투명도(0.333)의 75%입니다. 이렇게 하면 쌓인 순서에 관계없이 색상 비율이 동일하게 유지됩니다.

위 내용은 투명도는 겹치는 반투명 상자의 최종 색상에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!