attribute - title html css

¿El color de las cajas semitransparentes apiladas depende del pedido?

Question

¿Por qué el color final de dos cajas semitranslúcidas apiladas depende de la orden?

¿Cómo podría hacerlo para obtener el mismo color en ambos casos?

.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

Estás mezclando tres colores en el siguiente orden:

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

Y obtienes diferentes resultados. Esto se debe a que el color de primer plano se combina con el color de fondo utilizando el modo de mezcla normal ^1, que no es commutative . Y como no es conmutativo, el intercambio de colores de fondo y de primer plano producirá un resultado diferente.

¹ El modo de fusión es una función que acepta un color de fondo y de primer plano, aplica alguna fórmula y devuelve el color resultante.

La solución es usar un modo de fusión que sea conmutativo: uno que devuelva el mismo color para el mismo par de colores en cualquier orden (por ejemplo, el modo de combinación múltiple, que multiplica ambos colores y devuelve el color resultante; u oscurece el modo de combinación, que devuelve el color más oscuro de los dos).

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

Para completar, aquí está la fórmula para calcular el color compuesto:

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

con:

Cs: el valor de color del color de primer plano
αs: el valor alfa del color de primer plano
Cb: el valor del color del color de fondo.
αb: el valor alfa del color de fondo B: la función de fusión

Answer 2

Para una explicación de lo que sucede, vea la respuesta de Temani Afif.
Como solución alternativa, puede tomar un tramo, por ejemplo, posicionarlo y darle un índice z más bajo si está dentro de b . Entonces el apilamiento siempre será el mismo: b se dibuja encima de a en la primera línea, y a se dibuja debajo de b en la segunda.

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

Answer 3

Puede usar la propiedad css, modo mix-blend-mode : multiply ( soporte de navegador limitado)

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

Simplemente porque en ambos casos la combinación de colores no es la misma debido a cómo la opacidad de la capa superior afecta al color de la capa inferior .

Para el primer caso, verá 50% de azul y 50% de transparente en la capa superior. A través de la parte transparente, verá un 50% de color rojo en la capa inferior (por lo que solo vemos un 25% de rojo en total). Misma lógica para el segundo caso ( 50% de rojo y 25% de azul ); Así, verás diferentes colores porque en ambos casos no tenemos la misma proporción.

Para evitar esto, necesitas tener la misma proporción para ambos colores.

Aquí hay un ejemplo para ilustrar y mostrar mejor cómo podemos obtener el mismo color:

En la capa superior (el intervalo interno) tenemos 0.25 de opacidad (por lo tanto tenemos el 25% del primer color y el 75% de transparentes), luego para la capa inferior (el intervalo externo) tenemos 0.333 opacidad (por lo tanto, tenemos 1 / 3 del 75% = 25% del color y el resto es transparente). Tenemos la misma proporción en ambas capas (25%), por lo que vemos el mismo color incluso si revertimos el orden de las capas.

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

Como nota al margen, el fondo blanco también está afectando la representación de los colores. Su proporción es del 50%, lo que hará que el resultado lógico sea del 100% (25% + 25% + 50%).

También puede notar que no será posible tener la misma proporción para nuestros dos colores si la capa superior tiene una opacidad mayor que 0.5 porque la primera tendrá más del 50% y permanecerá menos del 50% para el segundo:

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

El caso trivial común es cuando la capa superior tiene opacity:1 que crea el color superior con una proporción del 100%; Por eso es un color opaco .

Para una explicación más precisa y precisa aquí está la fórmula utilizada para calcular el color que vemos después de la combinación de ambas capas ^ref :

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

ColorF es nuestro color final. ColorT / ColorB son, respectivamente, los colores superior e inferior. opacityT / opacityB son, respectivamente, las opacidades superior e inferior definidas para cada color:

El factor se define mediante esta fórmula OpacityT + OpacityB*(1 - OpacityT) .

Está claro que si cambiamos las dos capas, el factor no cambiará (seguirá siendo una constante), pero podemos ver claramente que la proporción de cada color cambiará ya que no tenemos el mismo multiplicador.

Para nuestro caso inicial, ambas opacidades son 0.5 por lo que tendremos:

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

Como se explicó anteriormente, el color superior tiene una proporción del 50% ( 0.5 ) y el inferior tiene una proporción del 25% ( 0.5*(1-0.5) ), por lo que el cambio de las capas también cambiará estas proporciones; Así vemos un color final diferente.

Ahora si consideramos el segundo ejemplo tendremos:

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

En este caso, tenemos 0.25 = 0.333*(1 - 0.25) por lo que cambiar las dos capas no tendrá ningún efecto; Así el color seguirá siendo el mismo.

También podemos identificar claramente los casos triviales:

• Cuando la capa superior tiene opacity:0 la fórmula es igual a ColorF = ColorB
• Cuando la capa superior tiene opacity:1 la fórmula es igual a ColorF = ColorT