Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
mix-blend-mode
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since enero de 2020.
* Some parts of this feature may have varying levels of support.
La propiedadCSSmix-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.
Pruébalo
mix-blend-mode: normal;mix-blend-mode: multiply;mix-blend-mode: hard-light;mix-blend-mode: difference;<section> <div> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> </div></section>.example-container { background-color: sandybrown;}Syntax
css
/* 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>El modo de mezcla que debería ser aplicado.
Sintaxis formal
mix-blend-mode =
<blend-mode>|
plus-lighter
<blend-mode> =
normal|
darken|
multiply|
color-burn|
lighten|
screen|
color-dodge|
overlay|
soft-light|
hard-light|
difference|
exclusion|
hue|
saturation|
color|
luminosity
Ejemplos
<div> <div> <div>Mezclado aislado (sin mezclar con el fondo)</div> <div> <div> normal <div> <div> <div></div> <svg viewBox="0 0 150 150"> <defs> <linearGradient> <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </linearGradient> <linearGradient> <stop offset="0" stop-color="hsl(120,100%,50%)" /> <stop offset="100%" stop-color="hsl(120,0%,100%)" /> </linearGradient> <linearGradient> <stop offset="0" stop-color="hsl(240,100%,50%)" /> <stop offset="100%" stop-color="hsl(240,0%,100%)" /> </linearGradient> </defs> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> multiply <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> darken <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> screen <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> lighten <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> overlay <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> color-dodge <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> color-burn <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> hard-light <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> soft-light <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> difference <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> exclusion <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> hue <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> saturation <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> color <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> luminosity <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> </div> <div>Mezclado global (mezclar con el fondo)</div> <div> <div> normal <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> multiply <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> darken <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> screen <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> lighten <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> overlay <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> color-dodge <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> color-burn <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> hard-light <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> soft-light <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> difference <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> exclusion <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> hue <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> saturation <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> color <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> luminosity <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> </div> </div></div>html,body { height: 100%; box-sizing: border-box; background: #eee;}.grid { width: 100%; display: flex; font: 1em monospace;}.row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; height: auto;}.col { display: flex; flex: 1 auto; flex-direction: column; height: auto;}.cell { margin: 0.5em; padding: 0.5em; background-color: #fff; overflow: hidden; text-align: center;}.note { background: #fff3d4; padding: 1em; margin: 0.5em 0.5em 0; font: 0.8em sans-serif; text-align: left; white-space: nowrap;}.note + .row .cell { margin-top: 0;}.container { position: relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto;}.R { transform-origin: center; transform: rotate(-30deg); fill: url(#red);}.G { transform-origin: center; transform: rotate(90deg); fill: url(#green);}.B { transform-origin: center; transform: rotate(210deg); fill: url(#blue);}.isolate .group { isolation: isolate;}.normal .item { mix-blend-mode: normal;}.multiply .item { mix-blend-mode: multiply;}.screen .item { mix-blend-mode: screen;}.overlay .item { mix-blend-mode: overlay;}.darken .item { mix-blend-mode: darken;}.lighten .item { mix-blend-mode: lighten;}.color-dodge .item { mix-blend-mode: color-dodge;}.color-burn .item { mix-blend-mode: color-burn;}.hard-light .item { mix-blend-mode: hard-light;}.soft-light .item { mix-blend-mode: soft-light;}.difference .item { mix-blend-mode: difference;}.exclusion .item { mix-blend-mode: exclusion;}.hue .item { mix-blend-mode: hue;}.saturation .item { mix-blend-mode: saturation;}.color .item { mix-blend-mode: color;}.luminosity .item { mix-blend-mode: luminosity;}Ejemplo vivo
html
<svg> <g> <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" /> </g></svg>css
circle { mix-blend-mode: screen;}.isolate { isolation: isolate;} /* sin aislación, el color de fondo será tenido en cuenta */Especificaciones
| Specification |
|---|
| Compositing and Blending Module Level 2 # mix-blend-mode |