Màu sắc của hộp bán trong suốt xếp chồng lên nhau phụ thuộc vào đơn đặt hàng?

Tại sao màu cuối cùng của hai hộp nửa mờ xếp chồng lên nhau lại phụ thuộc vào thứ tự?

Làm thế nào tôi có thể làm cho nó để tôi có được cùng một màu trong cả hai trường hợp?

.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>

Đơn giản bởi vì trong cả hai trường hợp, sự kết hợp của các màu không giống nhau do độ mờ của lớp trên cùng ảnh hưởng như thế nào đến màu của lớp dưới cùng .

Đối với trường hợp đầu tiên, bạn thấy 50% màu xanh lam và 50% trong suốt ở lớp trên cùng. Qua phần trong suốt, bạn nhìn thấy 50% màu đỏ ở lớp dưới cùng (vì vậy chúng ta chỉ thấy 25% tổng số màu đỏ ). Logic tương tự cho trường hợp thứ hai ( 50% màu đỏ và 25% màu xanh lam ); do đó bạn sẽ thấy các màu khác nhau bởi vì đối với cả hai trường hợp, chúng ta không có tỷ lệ giống nhau.

Để tránh điều này, bạn cần có tỷ lệ giống nhau cho cả hai màu của bạn.

Dưới đây là một ví dụ để minh họa rõ hơn và chỉ ra cách chúng ta có thể có được cùng một màu:

Ở lớp trên cùng (khoảng bên trong) chúng ta có 0.25độ mờ (vì vậy chúng ta có 25% màu đầu tiên và 75% trong suốt) sau đó đối với lớp dưới cùng (khoảng ngoài) chúng ta có 0.333độ mờ (vì vậy chúng ta có 1/3 75% = 25% màu và phần còn lại là trong suốt). Chúng ta có tỷ lệ như nhau trong cả hai lớp (25%) nên chúng ta thấy cùng một màu ngay cả khi chúng ta đảo ngược thứ tự các lớp.

.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>

Một lưu ý nhỏ, nền trắng cũng ảnh hưởng đến việc hiển thị màu sắc. Tỷ lệ của nó là 50% sẽ tạo ra kết quả hợp lý là 100% (25% + 25% + 50%).

Bạn cũng có thể nhận thấy rằng sẽ không thể có tỷ lệ giống nhau cho cả hai màu của chúng tôi nếu lớp trên cùng có độ mờ lớn hơn 0.5vì lớp đầu tiên sẽ có nhiều hơn 50% và nó sẽ vẫn nhỏ hơn 50% cho lớp thứ hai một:

.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>

Trường hợp nhỏ thường gặp là khi lớp trên cùng có opacity:1màu trên cùng với tỷ lệ 100%; do đó nó có màu đục .

Để có lời giải thích chính xác và chính xác hơn, đây là công thức được sử dụng để tính toán màu sắc mà chúng ta thấy sau khi kết hợp cả hai lớp ^ref :

ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor

ColorF là màu cuối cùng của chúng tôi. ColorT / ColorB lần lượt là màu trên và dưới. opacityT / opacityB tương ứng là độ mờ trên cùng và dưới cùng được xác định cho mỗi màu:

Các factorđược xác định bởi công thức này OpacityT + OpacityB*(1 - OpacityT).

Rõ ràng là nếu chúng ta chuyển đổi hai lớp, factornó sẽ không thay đổi (nó sẽ vẫn là một hằng số) nhưng chúng ta có thể thấy rõ rằng tỷ lệ của mỗi màu sẽ thay đổi vì chúng ta không có cùng một hệ số.

Đối với trường hợp ban đầu của chúng tôi, cả hai độ sáng đều 0.5như vậy, chúng tôi sẽ có:

ColorF = (ColorT*0.5 + ColorB*0.5*(1 - 0.5)) / factor

Giống như đã giải thích ở trên, màu trên cùng có tỷ lệ 50% ( 0.5) và màu dưới cùng có tỷ lệ 25% ( 0.5*(1-0.5)) vì vậy việc chuyển đổi các lớp cũng sẽ chuyển đổi các tỷ lệ này; do đó chúng ta thấy một màu cuối cùng khác .

Bây giờ nếu chúng ta xem xét ví dụ thứ hai, chúng ta sẽ có:

ColorF = (ColorT*0.25 + ColorB*0.333*(1 - 0.25)) / factor

Trong trường hợp này, chúng ta có thể 0.25 = 0.333*(1 - 0.25)chuyển đổi hai lớp sẽ không có tác dụng; do đó màu sắc sẽ được giữ nguyên.

Chúng tôi cũng có thể xác định rõ ràng các trường hợp nhỏ:

• Khi lớp trên cùng có opacity:0công thức bằngColorF = ColorB
• Khi lớp trên cùng có opacity:1công thức bằngColorF = ColorT

Bạn có thể sử dụng thuộc tính css, mix-blend-mode : multiply ( hỗ trợ trình duyệt hạn chế )

.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>

Bạn đang trộn ba màu theo thứ tự sau:

• 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))

Và bạn nhận được kết quả khác nhau. Điều này là do màu nền trước được pha trộn với màu nền bằng cách sử dụng chế độ hòa trộn bình thường ^1,2 không phải là chế độ giao hoán ³ . Và vì nó không có tính chất giao hoán, hoán đổi màu nền trước và màu nền sẽ tạo ra kết quả khác nhau.

¹ Chế độ hòa trộn là một chức năng chấp nhận màu nền trước và màu nền, áp dụng một số công thức và trả về màu kết quả.

² Với hai màu, nền và nền trước, chế độ hòa trộn bình thường chỉ trả về màu nền trước.

³ Một phép toán có tính chất giao hoán nếu việc thay đổi thứ tự của các toán hạng không làm thay đổi kết quả, ví dụ phép cộng là giao hoán (1 + 2 = 2 + 1) và phép trừ không phải là (1 - 2 ≠ 2 - 1).

Giải pháp là sử dụng một chế độ hòa trộn có tính chất giao hoán: một chế độ trả về cùng một màu cho cùng một cặp màu theo bất kỳ thứ tự nào (ví dụ: chế độ hòa trộn nhân, nhân cả hai màu và trả về màu kết quả; hoặc chế độ hòa trộn tối, trả về màu đậm hơn của hai).

$(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>

Để có sự hoàn chỉnh, đây là công thức để tính màu tổng hợp:

αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb

với:

Cs: giá trị màu của màu nền trước
αs: giá trị alpha của màu nền trước
Cb: giá trị màu của màu nền
αb: giá trị alpha của màu nền
B: chức năng hòa trộn

Để giải thích về những gì xảy ra, hãy xem câu trả lời của Temani Afif.
Là một giải pháp thay thế, bạn có thể lấy một khoảng, aví dụ, định vị nó và cung cấp cho nó một chỉ số z thấp hơn nếu nó ở bên trong b. Sau đó, cách xếp chồng sẽ luôn giống nhau: bđược vẽ trên ađầu dòng đầu tiên và ađược vẽ bên dưới btrong dòng thứ hai.

.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>