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

Simplement parce que, dans les deux cas, la combinaison de couleurs n’est pas la même en raison de l’opacité de la couche supérieure affectant la couleur du calque inférieur .

Dans le premier cas, vous voyez 50% de bleu et 50% de transparent dans la couche supérieure. À travers la partie transparente, vous voyez 50% de couleur rouge dans la couche inférieure (nous ne voyons donc que 25% de rouge au total). Même logique pour le second cas ( 50% de rouge et 25% de bleu ); ainsi vous verrez des couleurs différentes car dans les deux cas nous n’avons pas la même proportion.

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

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

Dans la couche supérieure (la scope interne), nous avons 0.25 d’opacité (nous avons donc 25% de la première couleur et 75% de transparent), alors pour la couche inférieure (la scope externe), nous avons 0.333 opacité (nous avons donc 1 / 3 de 75% = 25% de la couleur et le rest est transparent). Nous avons la même proportion dans les deux couches (25%), nous voyons donc la même couleur même si nous inversons 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) } 

  Color 1 Different Color 2 

Ajoutez la propriété 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; } 

  Color 1 Different Color 2 
 
 
 
 

Vous mélangez 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. Cela est dû au fait que la couleur de premier plan est mélangée à la couleur d’arrière-plan en utilisant le mode de fusion normal ¹ qui n’est pas commutatif . Et comme il n’est pas commutatif, l’échange des couleurs de premier plan et d’arrière-plan produira des résultats différents.

^{1 Le} mode de fusion est une fonction qui accepte une couleur de premier plan et d’arrière-plan, applique une formule et renvoie la couleur résultante.

La solution consiste à utiliser un mode de fusion commutatif: celui qui renvoie la même couleur pour la même paire de couleurs dans n’importe quel ordre (par exemple, le mode de mélange multiple qui multiplie les couleurs et renvoie la couleur résultante). la couleur plus sombre 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); } 

    multiply screen darken lighten difference exclusion   normal overlay color-dodge color-burn hard-light soft-light hue saturation color luminosity   
 
 
 
 
 
 
  

Pour une explication de ce qui se passe, voir la réponse de Temani Afif.
En a d’alternative, vous pouvez prendre un intervalle, par exemple le positionner et lui donner un index z inférieur s’il se trouve à l’intérieur de b . Ensuite, l’emstackment sera toujours le même: b est dessiné au-dessus de a dans la première ligne, et a est dessiné sous b dans la seconde.

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

  Color 1 Same Color 2