Esta página fue traducida del inglés por la comunidad, pero no se mantiene activamente, por lo que puede estar desactualizada. Si desea ayudar a mantenerlo, descubra cómo activar las configuraciones regionales inactivas.

background-blend-mode

Resumen

La propiedad CSS background-blend-mode describe cómo las imágenes de fondo y el color de fondo del elemento deben mezclar entre sí. 

Los modos de fusión deben ser definidos en el mismo orden que la propiedad CSS background-image. Si la cantidad de modos de fusión y de imagenes de fondo no son iguales, se repetirán y/o truncarán hasta igualar las cantidades.

Valor inicialnormal
Applies toAll elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line.
Heredableno
Valor calculadocomo se especifica
Animation typediscrete

Sintaxis

/* Un valor */
background-blend-mode: normal;

/* Dos valores, uno por fondo */
background-blend-mode: darken, luminosity;

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

Valores

<blend-mode>
Es un <blend-mode> que denota el modo de fusión que se aplicará. Puede haber varios valores, separados por coma.

Ejemplos

<select id="select">     <option>normal</option>     <option>multiply</option>     <option selected>screen</option>     <option>overlay</option>     <option>darken</option>     <option>lighten</option>     <option>color-dodge</option>     <option>color-burn</option>     <option>hard-light</option>     <option>soft-light</option>     <option>difference</option>     <option>exclusion</option>     <option>hue</option>     <option>saturation</option>     <option>color</option>     <option>luminosity</option> </select> 
#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: screen;
}
document.getElementById("select").onchange = function(event) {
    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
}
console.log(document.getElementById('div'));

Especificaciones

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

Compatibilidad en 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! (en-US)

Caracteristica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico  35 30.0 (30.0) Sin soporte 22 7.1
Caracteristica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico Sin soporte 30.0 (30.0) Sin soporte 22 iOS 8

Véase también