쌓인 반투명 상자의 색상은 주문에 따라 다릅니 까?
두 개의 쌓인 반투명 상자의 최종 색상이 순서에 따라 달라지는 이유는 무엇입니까?
두 경우 모두 동일한 색상을 얻으려면 어떻게 만들 수 있습니까?
.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되기 때문에 상단 레이어의 불투명도가 더 큰 경우 두 색상에 대해 동일한 비율을 가질 수 없습니다. 하나:
.a {
background-color: rgba(255, 0, 0, 1) /*taking 40% even with opacity:1*/
}
.b {
background-color: rgba(0, 0, 255, 1) /*taking 40% even with opacity:1*/
}
.a > .b {
background-color: rgba(0, 0, 255, 0.6) /* taking 60%*/
}
.b > .a {
background-color: rgba(255, 0, 0, 0.6) /* taking 60%*/
}<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>일반적인 사소한 경우는 상단 레이어가 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 = ColorB - 최상위 레이어가
opacity:1공식이 같을 때ColorF = ColorT
css 속성을 사용할 수 있습니다 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))
그리고 다른 결과를 얻습니다. 이는 전경색 이 교환 적이 지 않은 일반 혼합 모드 1 을 사용하여 배경색과 혼합되기 때문 입니다. 그리고 교환 적이 지 않기 때문에 전경색과 배경색을 바꾸면 다른 결과가 생성됩니다.
1 혼합 모드는 전경색과 배경색을 받아들이고 일부 공식을 적용하여 결과 색상을 반환하는 기능입니다.
해결책은 교환 가능한 혼합 모드를 사용하는 것입니다. 순서에 관계없이 동일한 색상 쌍에 대해 동일한 색상을 반환하는 모드 (예 : 두 색상을 곱하고 결과 색상을 반환하는 곱하기 혼합 모드 또는 반환되는 어둡게 혼합 모드) 둘 중 더 어두운 색).
$(function() {
$("#mode").on("change", function() {
var mode = $(this).val();
$("#demo").find(".a, .b").css({
"mix-blend-mode": mode
});
});
});#demo > div {
width: 12em;
height: 5em;
margin: 1em 0;
}
#demo > div > div {
width: 12em;
height: 4em;
position: relative;
top: .5em;
left: 4em;
}
.a {
background-color: rgba(255, 0, 0, 0.5);
}
.b {
background-color: rgba(0, 0, 255, 0.5);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mode">
<optgroup label="commutative">
<option>multiply</option>
<option>screen</option>
<option>darken</option>
<option>lighten</option>
<option>difference</option>
<option>exclusion</option>
</optgroup>
<optgroup label="non-commutative">
<option selected>normal</option>
<option>overlay</option>
<option>color-dodge</option>
<option>color-burn</option>
<option>hard-light</option>
<option>soft-light</option>
<option>hue</option>
<option>saturation</option>
<option>color</option>
<option>luminosity</option>
</optgroup>
</select>
<div id="demo">
<div class="a">
<div class="b"></div>
</div>
<div class="b">
<div class="a"></div>
</div>
</div>완전성을 위해 다음은 합성 색상을 계산하는 공식입니다.
αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb
와:
Cs: the color value of the foreground color
αs: the alpha value of the foreground color
Cb: the color value of the background color
αb: the alpha value of the background color B: the blending function
For explanation of what happens, see Temani Afif's answer.
As an alternative solution, you can take one span, a for instance, position it and give it a lower z-index if it's inside b. Then the stacking will always be the same: b is drawn on top of a in the first line, and a is drawn underneath b in the second.
.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>'programing tip' 카테고리의 다른 글
| 배치-rmdir 명령에서 "디렉토리가 비어 있지 않습니다"가져 오기 (0) | 2020.10.19 |
|---|---|
| pip 명령을 사용하여 requirements.txt에서 Python 패키지 업그레이드 (0) | 2020.10.19 |
| 레이크는 정확히 무엇입니까? (0) | 2020.10.19 |
| bash-어떤 명령에서 cd로 결과를 파이프하는 방법 (0) | 2020.10.19 |
| ASP.NET MVC 용 reCaptcha를 구현하는 방법은 무엇입니까? (0) | 2020.10.19 |