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 January 2020.
Resumo
A propriedade mix-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 |
Creates stacking 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
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 |
Compatibilidade de navegadores
BCD tables only load in the browser