Atributo background-blend-mode CSS

Definición y uso

background-blend-mode La propiedad define el modo de mezcla de cada capa de fondo (color y/u imagen).

Véase también:

Tutoriales de CSS:CSS Fondo

Example

Especifique el modo de mezcla de la imagen de fondo como "lighten" (claro):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

Try it yourself

Puede ver más ejemplos de TIY en la parte inferior de la página.

Sintaxis de CSS

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Valor del atributo

Valor Descripción
normal Predeterminado. Establezca el modo de mezcla en normal.
multiply Establezca el modo de mezcla en multiply (multiplicar).
screen Establezca el modo de mezcla en screen (pantalla).
overlay Establezca el modo de mezcla en overlay (superponer).
darken Establezca el modo de mezcla en overlay (superponer).
lighten Establezca el modo de mezcla en lighten (claro).
color-dodge Set the blending mode to color-dodge (color lighten).
saturation Set the blending mode to saturation.
color Set the blending mode to color.
luminosity Set the blending mode to luminosity (brightness).

Technical details

Default value: normal
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.backgroundBlendMode="screen"

More examples

Example

Set the blending mode to "multiply":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

Try it yourself

Example

Set the blending mode to "screen":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

Try it yourself

Example

Set the blending mode to "overlay":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

Try it yourself

Example

Set the blending mode to "darken":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

Try it yourself

Example

Set the blending mode to "color-dodge":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

Try it yourself

Example

Set the blending mode to "saturation":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

Try it yourself

Example

Set the blending mode to "color":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

Try it yourself

Example

Set the blending mode to "luminosity":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

Try it yourself

Example

Set the blending mode to "normal":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

Try it yourself

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1