background-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.
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 inicial | normal |
|---|---|
| Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line. |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | Not animatable |
Sintaxis
css
/* 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
html
<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 id="div"></div>
css
#div {
width: 300px;
height: 300px;
background: url("br.png"), url("tr.png");
background-blend-mode: screen;
}
js
document.getElementById("select").onchange = function (event) {
document.getElementById("div").style.backgroundBlendMode =
document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
Especificaciones
| Specification |
|---|
| Compositing and Blending Module Level 2 # background-blend-mode |