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 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
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 |
Compatibilidade de navegadores
Loading…