Atributo background-blend-mode CSS

Definition and Usage

background-blend-mode The attribute defines the blending mode for each background layer (color and/or image).

See also:

CSS Tutorial:Fundo CSS

Exemplo

Specify the blending mode of the background image as "lighten" (brighten):

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

Experimente pessoalmente

You can see more TIY examples at the end of the page.

CSS Syntax

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

Attribute Value

Value Description
normal Default. Configure the blending mode to normal.
multiply Configure the blending mode to multiply (multiply).
screen Configure the blending mode to screen (screen).
overlay Configure the blending mode to overlay (cover).
darken Configure the blending mode to overlay (cover).
lighten Configure the blending mode to lighten (brighten).
color-dodge Defina o modo de mistura para color-dodge（cor desbotada）.
saturation Defina o modo de mistura para saturation（saturação）.
color Defina o modo de mistura para color（cor）.
luminosity Defina o modo de mistura para luminosity（brilho）.

Detalhes técnicos

Valor padrão: normal
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.backgroundBlendMode="screen"

Mais exemplos

Exemplo

Defina o modo de mistura para "multiply":

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

Experimente pessoalmente

Exemplo

Defina o modo de mistura para "screen":

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

Experimente pessoalmente

Exemplo

Defina o modo de mistura para "overlay":

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

Experimente pessoalmente

Exemplo

Defina o modo de mistura para "darken":

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

Experimente pessoalmente

Exemplo

Defina o modo de mistura para "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;
}

Experimente pessoalmente

Exemplo

Defina o modo de mistura para "saturation":

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

Experimente pessoalmente

Exemplo

Defina o modo de mistura para "color":

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

Experimente pessoalmente

Exemplo

Defina o modo de mistura para "luminosity":

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

Experimente pessoalmente

Exemplo

Defina o modo de mistura para "normal":

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

Experimente pessoalmente

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

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