Esta página foi traduzida do inglês pela comunidade. Saiba mais e junte-se à comunidade MDN Web Docs.
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 janeiro de 2020.
A propriedade CSS background-blend-mode descreve como as imagens de fundo do elemento devem se misturar entre si e a cor de fundo do elemento.
/* Um valor */
background-blend-mode: normal;
/* Dois valores, um por fundo */
background-blend-mode: darken, luminosity;
/* Valores globais */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;
Os modos de mistura devem ser definidos na mesma ordem que a propriedade CSS background-image. Se os comprimentos da lista dos modos de mistura e das imagens de fundo não forem iguais, ele será repetido e/ou truncado até que os comprimentos correspondam.
| Initial value | normal |
|---|---|
| Aplica-se a | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line. |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |
Sintaxe
Valores
<blend-mode>-
É um
<blend-mode>denotando o modo de mesclagem a ser aplicado. Pode haver vários valores, separados por vírgulas.
Sintaxe formal
background-blend-mode =
<mix-blend-mode> #
Exemplos
<div id="div"></div>
<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("br.png"), url("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"));
Especificações
| Specification |
|---|
| Compositing and Blending Level 2 # background-blend-mode |
Compatibilidade com navegadores
Enable JavaScript to view this browser compatibility table.