두 개의 쌓인 반투명 상자의 최종 색상이 순서에 따라 달라지는 이유는 무엇입니까?
두 경우 모두 동일한 색상을 얻으려면 어떻게 만들 수 있습니까?
.a {
background-color: rgba(255, 0, 0, 0.5)
}
.b {
background-color: rgba(0, 0, 255, 0.5)
}<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>답변:
두 경우 모두 상단 레이어의 불투명도가 하단 레이어 의 색상에 영향을 미치는 방식으로 인해 색상 조합이 동일하지 않기 때문 입니다.
첫 번째 경우 상단 레이어 에 파란색의 50 %와 투명의 50 %가 표시됩니다. 투명한 부분을 통해 하단 레이어에 빨간색의 50 %가 표시됩니다 (따라서 전체적으로 빨간색의 25 % 만 표시됨). 두번째 경우 (동일한 논리 대 적색의 50 % 및 청색의 25 % ); 따라서 두 경우 모두 동일한 비율이 없기 때문에 다른 색상을 볼 수 있습니다.
이를 방지하려면 두 색상에 대해 동일한 비율을 가져야합니다.
다음은 동일한 색상을 얻는 방법을 더 잘 설명하고 보여주는 예입니다.
맨 위 레이어 (내부 범위)에는 0.25불투명도 (첫 번째 색상의 25 %, 투명도 75 %)가 있고 맨 아래 레이어 (외부 범위)에는 0.333불투명도 가 있습니다 (그러므로 75 % = 색상의 25 %이고 나머지는 투명 함). 두 레이어의 비율 (25 %)이 같으므로 레이어 순서를 반대로해도 같은 색이 보입니다 .
.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)
}<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>참고로 흰색 배경은 색상 렌더링에도 영향을 미칩니다. 비율은 50 %로 논리적 결과는 100 % (25 % + 25 % + 50 %)가됩니다.
첫 번째 레이어의 불투명도 가 50 % 이상이고 두 번째 레이어는 50 % 미만으로 유지 0.5되기 때문에 상단 레이어의 불투명도가 더 큰 경우 두 색상에 대해 동일한 비율을 가질 수 없음을 알 수 있습니다. 하나:
일반적인 사소한 경우는 상단 레이어가 opacity:1100 % 비율로 상단 색상을 만드는 경우입니다. 따라서 불투명 한 색상입니다.
여기에보다 정확하고 정확한 설명은 우리가 두 층의 조합으로 볼 수있는 색상 계산하는 데 사용되는 공식은 심판 :
ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor
ColorF 는 최종 색상입니다. ColorT / ColorB 는 각각 상단 및 하단 색상입니다. opacityT / opacityB 는 각각 각 색상에 대해 정의 된 상단 및 하단 불투명도입니다.
는 factor이 식에 의해 정의된다 OpacityT + OpacityB*(1 - OpacityT).
두 레이어를 전환하면 factor변경되지 않지만 (일정하게 유지됨) 동일한 배율이 없기 때문에 각 색상의 비율이 변경된다는 것을 분명히 알 수 있습니다.
초기의 경우 두 가지 불투명도가 모두 0.5있으므로 다음과 같이됩니다.
ColorF = (ColorT*0.5 + ColorB*0.5*(1 - 0.5)) / factor
위에서 설명한 것처럼 상단 색상의 비율은 50 % ( 0.5)이고 하단 색상 의 비율은 25 % ( 0.5*(1-0.5))이므로 레이어를 전환하면 이러한 비율도 전환됩니다. 따라서 우리는 다른 최종 색상을 볼 수 있습니다.
이제 두 번째 예를 고려하면 다음과 같이됩니다.
ColorF = (ColorT*0.25 + ColorB*0.333*(1 - 0.25)) / factor
이 경우 0.25 = 0.333*(1 - 0.25)두 레이어를 전환해도 효과가 없습니다. 따라서 색상은 동일하게 유지됩니다.
또한 사소한 경우를 명확하게 식별 할 수 있습니다.
opacity:0공식이 같을 때ColorF = ColorBopacity:1공식이 같을 때ColorF = ColorTcss 속성을 사용할 수 있습니다 mix-blend-mode : multiply (제한된 브라우저 지원 ).
.a {
background-color: rgba(255, 0, 0, 0.5);
mix-blend-mode: multiply;
}
.b {
background-color: rgba(0, 0, 255, 0.5);
mix-blend-mode: multiply;
}
.c {
position: relative;
left: 0px;
width: 50px;
height: 50px;
}
.d {
position: relative;
left: 25px;
top: -50px;
width: 50px;
height: 50px;
}<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>
<div class="c a"></div>
<div class="d b"></div>
<div class="c b"></div>
<div class="d a"></div>다음 순서로 세 가지 색상을 혼합합니다.
rgba(0, 0, 255, 0.5) over (rgba(255, 0, 0, 0.5) over rgba(255, 255, 255, 1))rgba(255, 0, 0, 0.5) over (rgba(0, 0, 255, 0.5) over rgba(255, 255, 255, 1))그리고 다른 결과를 얻습니다. 이는 전경색 이 교환 3 이 아닌 일반 혼합 모드 1,2 를 사용하여 배경색과 혼합되기 때문입니다. 입니다. 그리고 교환 적이 지 않기 때문에 전경색과 배경색을 바꾸면 다른 결과가 생성됩니다.
1 혼합 모드는 전경색과 배경색을 받아들이고 일부 공식을 적용하여 결과 색상을 반환하는 기능입니다.
2 배경과 전경의 두 가지 색상이 주어지면 일반 블렌드 모드는 단순히 전경색을 반환합니다.
삼 피연산자의 순서를 변경해도 결과가 변경되지 않는 경우 연산은 교환 적입니다. 예를 들어 덧셈은 교환 (1 + 2 = 2 + 1)이고 뺄셈은 그렇지 않습니다 (1-2 ≠ 2-1).
해결책은 임의의 순서로 동일한 색상 쌍에 대해 동일한 색상을 반환하는 혼합 모드를 사용하는 것입니다 (예 : 두 색상을 곱하고 결과 색상을 반환하는 곱하기 혼합 모드 또는 반환되는 어둡게 혼합 모드). 둘 중 더 어두운 색).
완전성을 위해 다음은 합성 색상을 계산하는 공식입니다.
αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb
와:
Cs :
전경색
의 색상 값
αs : 전경색의 알파 값 Cb : 배경색의 색상 값 αb : 배경색 의 알파 값
B : 블렌딩 기능
일어나는 일에 대한 설명은 Temani Afif의 답변을 참조하십시오.
대체 솔루션으로 하나의 범위를 가져 와서 a배치하고 내부에있는 경우 더 낮은 Z- 색인을 제공 할 수 있습니다 b. 그러면 스택은 항상 동일합니다. 첫 번째 줄의 b맨 위에 그려지고 a두 번째 줄의 a아래 b에 그려집니다 .
.a {
background-color: rgba(255, 0, 0, 0.5);
}
.b {
background-color: rgba(0, 0, 255, 0.5);
}
.b .a {position:relative; z-index:-1;}<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Same Color 2</span></span>