Aventuras en la tierra de la semitransparencia CSS

Recientemente, me pidieron que hiciera algunos ajustes en una página de destino y, entre las cosas que encontré en el código, había dos superposiciones semitransparentes, ambas con los mismos valores RGB, background-colorencima de una imagen. Algo como esto:

img src='myImage.jpg'/div class='over1'/divdiv class='over2'/div

No había ningún propósito en tener dos aparte del hecho de que tener solo uno no teñía la imagen lo suficiente. Por alguna razón, quien codificó inicialmente esa página pensó que agregar otra superposición semitransparente era una mejor idea que aumentara la opacityde la primera.

Entonces, decidí deshacerme de una capa y darle a la restante un opacityvalor que diera un resultado visual equivalente al inicial, obtenido al usar dos capas. Muy bien, pero ¿cómo obtenemos el opacityequivalente de una capa?

Si recuerdas mi curso intensivo sobre maskcomposición, entonces habrás adivinado la respuesta porque es exactamente la misma fórmula que también usamos para la addoperación de composición. Dadas dos capas con alfa a0y a1, el alfa resultante es:

a0 + a1 - a0⋅a1

La demostración interactiva a continuación muestra una mirada comparativa a una superposición de dos capas con alfa a0y a1(que puede controlar a través de las entradas de rango) versus una superposición de una capa con un alfa de a0 + a1 - a0⋅a1.

Curiosamente, se ven idénticos si eliminamos la imagen (a través de la casilla de verificación en la parte inferior de la demostración), pero parecen un poco diferentes con la imagen de debajo. Quizás la diferencia sea solo que mis ojos me engañan dado que la imagen es más clara en algunas partes y más oscura en otras.

Definitivamente no se ve diferente si no los tenemos uno al lado del otro y simplemente cambiamos entre las dos capas de alfa a0y a1la capa de alfa a0 + a1 - a0⋅a1.

Esto se puede extender a varias capas. En este caso, calculamos la capa equivalente de las dos capas inferiores, luego la capa equivalente de este resultado y la capa justo encima de ella, y así sucesivamente:

Jugar con esto también me ha hecho preguntarme sobre el backgroundequivalente sólido de una capa sólida ( c0) con una superposición semitransparente ( c1con un alfa de a) en la parte superior. En este caso, el backgroundequivalente de una capa se calcula por canal, siendo los canales resultantes:

ch0 + (ch1 - ch0)*a

…donde ch0está un canal ( red, greeno blue) de la capa inferior sólida, ch1el canal correspondiente de la capa semitransparente superior y ael alfa de la misma capa semitransparente superior.

Al poner esto en código Sass, tenemos:

/* per channel function */@function res-ch($ch0, $ch1, $a) {  @return $ch0 + ($ch1 - $ch0)*$a}@function res-col($c0, $c1, $a) {  $ch: 'red' 'green' 'blue'; /* channel names */  $nc: length($ch); /* number of channels */  $ch-list: ();  @for $i from 0 to $nc {    $fn: nth($ch, $i + 1);    $ch-list: $ch-list,       res-ch(call($fn, $c0), call($fn, $c1), $a);  }  @return RGB($ch-list)}

La demostración interactiva a continuación (que nos permite elegir los valores RGB de las dos capas, así como el alfa de la superior haciendo clic en las muestras y el valor alfa, respectivamente) muestra una mirada comparativa de las dos capas versus nuestro equivalente calculado de una capa. .

Dependiendo del dispositivo, sistema operativo y navegador, es posible que veas que los dos paneles de la demostración anterior tienen fondos idénticos... o no. La fórmula es correcta, pero la forma en que los diferentes navegadores en diferentes sistemas operativos y dispositivos manejan el caso de dos capas puede variar.

Pedí capturas de pantalla de un caso de prueba simplificado en Twitter y, según las respuestas que recibí, los dos paneles siempre parecen tener el mismo aspecto en los navegadores móviles, independientemente de si estamos hablando de dispositivos Android o iOS, además de Firefox. independientemente del sistema operativo. También parecen ser casi siempre idénticos en Windows, aunque recibí una respuesta informándome que Chrome y Chromium Edge a veces pueden mostrar los dos paneles de manera diferente.

Cuando se trata de navegadores WebKit en macOS y Linux, los resultados son muy variados, con paneles ligeramente diferentes en la mayoría de los casos. Dicho esto, cambiar a un perfil sRGB podría hacerlos idénticos. Lo más divertido aquí es que, cuando se utiliza una configuración de dos monitores, arrastrar la ventana de un monitor a otro puede marcar la diferencia si los dos paneles aparecen o desaparecen.

Sin embargo, en un caso de uso real, la diferencia es bastante pequeña y nunca tendremos los dos paneles uno al lado del otro. Incluso si hay una diferencia, nadie se enterará a menos que prueben la página en diferentes escenarios, algo que probablemente sólo un desarrollador web haría de todos modos. Y no es que no tengamos diferencias entre cómo se ven los mismos fondos sólidos en diferentes dispositivos, sistemas operativos y navegadores. Por ejemplo, #ffa800, que se usa mucho aquí en CSS-Tricks, no se ve igual en mis computadoras portátiles Ubuntu y Windows. Lo mismo puede decirse de la forma en que los ojos de las personas pueden percibir las cosas de manera diferente.