Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
mix-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.
* Some parts of this feature may have varying levels of support.
Resumo
A propriedademix-blend-mode descreve como um elemento de conteúdo deve ser mesclado com os elementos abaixo dele no background.
| Initial value | normal |
|---|---|
| Aplica-se a | all elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |
| Createsstacking context | yes |
Sintaxe
css
/* Valores para esta propriedade */mix-blend-mode: normal;mix-blend-mode: multiply;mix-blend-mode: screen;mix-blend-mode: overlay;mix-blend-mode: darken;mix-blend-mode: lighten;mix-blend-mode: color-dodge;mix-blend-mode: color-burn;mix-blend-mode: hard-light;mix-blend-mode: soft-light;mix-blend-mode: difference;mix-blend-mode: exclusion;mix-blend-mode: hue;mix-blend-mode: saturation;mix-blend-mode: color;mix-blend-mode: luminosity;/* Valores globais */mix-blend-mode: initial;mix-blend-mode: inherit;mix-blend-mode: unset;Valores
<blend-mode>É uma
<blend-mode>que descreve qual mesclagem deve ser aplicada. Podem ser descritos vários valores, separados por vírgula.
Sintaxe formal
mix-blend-mode =
<blend-mode>|
plus-darker|
plus-lighter
<blend-mode> =
normal|
multiply|
screen|
overlay|
darken|
lighten|
color-dodge|
color-burn|
hard-light|
soft-light|
difference|
exclusion|
hue|
saturation|
color|
luminosity
Exemplos
html
<svg> <circle cx="40" cy="40" r="40" fill="red" /> <circle cx="80" cy="40" r="40" fill="lightgreen" /> <circle cx="60" cy="80" r="40" fill="blue" /></svg>css
circle { mix-blend-mode: screen;}Resultado
Especificações
| Specification |
|---|
| Compositing and Blending Level 2 # mix-blend-mode |