We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Introducción

La propiedad CSS mix-blend-mode describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.

Valor inicialnormal
Applies toall elements
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal
Creates stacking contextyes

Sintaxis

/* Valores clave */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Valores globales */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

Valores

<blend-mode>
Es un <blend-mode> que denota el modo de mezcla que debe ser aplicado. Puede haber varios valores, separados por comas.

Sintaxis formal

<blend-mode>

where
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Ejemplos

<svg>
  <circle cx="40" cy="40" r="40" fill="red"/>
  <circle cx="80" cy="40" r="40" fill="lightgreen"/>
  <circle cx="60" cy="80" r="40" fill="blue"/>
</svg>
circle { mix-blend-mode: screen; }

Resultado

Especificaciones

Especificación Estado Comentario
Compositing and Blending Level 1
La definición de 'mix-blend-mode' en esta especificación.
Candidate Recommendation Especificación inicial.

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico

41.0

32.0 (32.0) ? (Yes) 8.0
SVG Sin soporte 32.0 (32.0) ? Sin soporte Sin soporte
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support

41.0

32.0 (32.0) ? ? 8.0
SVG Sin soporte 32.0 (32.0) ? Sin soporte Sin soporte

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: mrstork, teoli, Sebastianz, msanz
Última actualización por: mrstork,