La couleur des boîtes semi-transparentes empilées dépend de la commande?

Question

Pourquoi la couleur finale de deux boîtes semi-translucides empilées dépend-elle de la commande?

Comment pourrais-je faire en sorte que j'obtienne la même couleur dans les deux cas?

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

Answer 1

Tout simplement parce que dans les deux cas, la combinaison de couleurs n'est pas la même en raison de la façon dont l'opacité du haut de la couche d'affecter la couleur du fond de la couche.

Pour le premier cas, à vous de voir 50% de bleu et de 50% de transparence dans la couche supérieure. Grâce à la partie transparente, à vous de voir 50% de la couleur rouge dans la couche de fond (si on ne voit plus que 25% de rouge au total). Même logique pour le deuxième cas (50% de rouge et de 25% de bleu); ainsi, vous pourrez voir différentes couleurs, car pour les deux cas, nous n'avons pas la même proportion.

Pour éviter cela, vous devez avoir la même proportion pour les deux vos couleurs.

Voici un exemple pour mieux illustrer et montrer comment on peut obtenir la même couleur:

Dans la couche supérieure (l'intérieur span) nous avons 0.25 d'opacité (donc, nous avons 25% de la première couleur et 75% de transparence), ensuite pour la couche de fond (que l'extérieur de la durée), nous avons 0.333 d'opacité (nous avons donc 1/3 de 75% = 25% de la couleur et le reste est transparent). Nous avons la même proportion dans les deux couches (25%) de sorte que nous voyons la même couleur même si on inverse l'ordre des couches.

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

Comme une note côté, le fond blanc est aussi une incidence sur le rendu des couleurs. Sa proportion est de 50%, ce qui rendra la conséquence logique de la 100% (25% + 25% + 50%).

Vous pouvez également remarquer que ce ne sera pas possible d'avoir la même proportion pour nos deux couleurs si la couche supérieure est d'avoir une opacité plus grand que 0.5 parce que la première fois, plus de 50% , et il restera moins de 50% pour la seconde:

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

La commune trivial le cas lorsque la couche supérieure est d'avoir opacity:1 qui font de la couleur du dessus avec une proportion de 100%, donc c'est un opaque de couleur.

---

Pour plus de précision et d'explication précise ici est la formule utilisée pour calculer la couleur nous voir après la combinaison de deux couches^ref:

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

ColorF est notre couleur finale. ColorT/ColorB sont respectivement en haut et en bas de couleurs. opacityT/opacityB sont respectivement en haut et en bas des opacités définis pour chaque couleur:

L' factor est défini par cette formule, OpacityT + OpacityB*(1 - OpacityT).

Il est clair que si nous passons les deux couches de l' factor ne changera pas (il restera une constante), mais nous pouvons clairement voir que la proportion de chaque couleur va changer puisque nous n'avons pas le même multiplicateur.

Pour notre cas initial, les deux opacités sont 0.5 nous aurons:

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

Comme expliqué ci-dessus, la couleur du dessus est d'avoir une proportion de 50% (0.5) et celui du bas est d'avoir une proportion de 25% (0.5*(1-0.5)) afin de changer les couches vais aussi passer ces proportions; ainsi, nous voyons une autre finale de la couleur.

Maintenant, si nous considérons le deuxième exemple, nous aurons:

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

Dans ce cas, nous avons 0.25 = 0.333*(1 - 0.25) afin de changer les deux couches n'aura aucun effet; ainsi la couleur restera le même.

Nous pouvons également identifier clairement les cas triviaux:

• Lorsque la couche est d'avoir opacity:0 de la formule est égal à ColorF = ColorB
• Lorsque la couche est d'avoir opacity:1 de la formule est égal à ColorF = ColorT

Answer 2

Vous pouvez utiliser la propriété css, mix-blend-mode : multiply (limité prise en charge du navigateur)

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

Answer 3

Vous êtes un mélange de trois couleurs dans l'ordre suivant:

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

Et vous obtenez des résultats différents. C'est parce que la couleur de premier plan est mélangé avec la couleur d'arrière-plan à l'aide de mode de fusion normal^1,2 ce qui n'est pas commutative³. Et puisqu'il n'est pas commutative, la permutation de premier plan et d'arrière-plan, les couleurs de produire des résultats différents.

¹ mode de Fusion est une fonction qui accepte un premier plan et la couleur d'arrière-plan, s'applique de la formule et retourne la couleur résultante.

² compte tenu de deux couleurs, arrière-plan et de premier plan, mode de fusion normal renvoie simplement la couleur de premier plan.

³ Une opération est commutative si la modification de l'ordre des opérandes ne change pas le résultat, par exemple, l'addition est commutative (1 + 2 = 2 + 1) et la soustraction n'est pas (1 - 2 ≠ 2 - 1).

La solution est d'utiliser un mode de fusion qui est commutative: celui qui renvoie la même couleur pour la même paire de couleurs dans n'importe quel ordre (par exemple le mode de fusion multiplier, ce qui multiplie les deux couleurs et retourne la couleur résultante; ou le mode de fusion obscurcir, qui renvoie la couleur plus foncée des deux).

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

---

Pour être complet, voici la formule pour calculer un composite de couleur:

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

avec:

Cs: la valeur de la couleur de la couleur de premier plan
comme: la valeur alpha de la couleur de premier plan
Cb: la valeur de la couleur de l'arrière-plan de couleur
ab: la valeur alpha de la couleur d'arrière-plan
B: la fonction fusion

Answer 4

Pour une explication de ce qui se passe, voir Temani Afif réponse.
Comme une solution alternative, vous pouvez prendre une travée, a , par exemple, de la position et de leur donner une plus faible z-index si c'est à l'intérieur d' b. Ensuite, le cumul de l'aide sera toujours la même: b est appliqué sur le dessus de l' a dans la première ligne, et a est dessiné sous b dans le 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>