Modo de mezcla de fondo - Trucos CSS

La background-blend-modepropiedad define cómo background-imagedebe combinarse un elemento con su background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Vea el modo de mezcla de fondo de la pluma de CSS-Tricks (@ css-tricks) en CodePen.

En la demostración anterior, el valor predeterminado background-imagede la izquierda no tiene configurado el modo de fusión y, por lo tanto, la imagen se superpone al background-color. Sin embargo, a la derecha, el modo de fusión ha modificado background-imagecon el rojo background-colordebajo. Pero observe que el color del texto no se ha visto afectado por esta propiedad adicional.

Valores

initial: el valor predeterminado sin mezcla.
inherit: hereda el modo de mezcla del elemento padre.
: un valor que cambiará la imagen de fondo dependiendo de su color de fondo.

El valor se puede establecer como cualquiera de los siguientes (en las demostraciones a continuación, el background-colores rojo):

`luminosity`: la luminosidad del color superior se conserva mientras se usa la saturación y el tono del color de fondo.

Manifestación

A continuación, se muestra un ejemplo práctico de cómo se interpretan esos valores en función de background-color:

Vea el modo de fusión Pen Background de CSS-Tricks (@ css-tricks) en CodePen.

Encadenando múltiples modos de fusión

Cada capa de fondo solo puede tener un único modo de fusión, sin embargo, si usamos múltiples gradientes lineales, por ejemplo, cada uno de ellos puede tener su propio modo de fusión, lo que lo convierte en una pantalla interesante:

Vea los degradados de lápiz y el modo de mezcla de fondo de CSS-Tricks (@ css-tricks) en CodePen.

Esto se logra enumerando estos valores en orden de la capa de fondo que le gustaría aplicar:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

El primer degradado lineal tiene el screenmodo de fusión, seguido del segundo degradado lineal que tiene differencey la primera imagen de fondo que se le ha lightenaplicado.