Propriedade CSS background-blend-mode
Exemplo
Especifique o modo de mesclagem de uma imagem de fundo a ser "clareada":
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A background-blend-mode
propriedade define o modo de mesclagem de cada camada de fundo (cor e/ou imagem).
Valor padrão: | normal |
---|---|
Herdado: | não |
Animavel: | não. Leia sobre animáveis |
Versão: | CSS3 |
Sintaxe JavaScript: | objeto .style.backgroundBlendMode="screen" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
Sintaxe CSS
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Valores de propriedade
Value | Description | Play it |
---|---|---|
normal | This is default. Sets the blending mode to normal | |
multiply | Sets the blending mode to multiply | |
screen | Sets the blending mode to screen | |
overlay | Sets the blending mode to overlay | |
darken | Sets the blending mode to darken | |
lighten | Sets the blending mode to lighten | |
color-dodge | Sets the blending mode to color-dodge | |
saturation | Sets the blending mode to saturation | |
color | Sets the blending mode to color | |
luminosity | Sets the blending mode to luminosity |
Mais exemplos
Exemplo
Especifique o modo de mesclagem para ser "multiplicar":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
Exemplo
Especifique o modo de mesclagem para ser "tela":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
Exemplo
Especifique o modo de mesclagem para ser "sobreposição":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
Exemplo
Especifique o modo de mesclagem a ser "escurecer":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
Exemplo
Especifique o modo de mesclagem para ser "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;
}
Exemplo
Especifique o modo de mesclagem para ser "saturação":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
Exemplo
Especifique o modo de mesclagem para ser "cor":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
Exemplo
Especifique o modo de mesclagem como "luminosidade":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
Exemplo
Especifique o modo de mesclagem para ser "normal":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
Páginas relacionadas
Tutorial de CSS: Fundo de CSS