Tradução em progresso.
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 |
| Midia | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
| Creates stacking context | yes |
Sintaxe
/* 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
<blend-mode>where
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
Exemplos
<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>
circle { mix-blend-mode: screen; }
Resultado
Especificações
| Specification | Status | Comment |
|---|---|---|
| Compositing and Blending Level 1 The definition of 'mix-blend-mode' in that specification. |
Candidata a Recomendação | Initial specification. |
Compatibilidade de navegadores
Estamos convertendo nossos dados de compatibilidade para o formato JSON.
Esta tabela de compatibilidade ainda usa o formato antigo,
pois ainda não convertemos os dados que ela contém.
Descubra como você pode ajudar!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support |
41.0 |
32.0 (32.0) | ? | (Yes) | 8.0 |
| SVG | Não suportado | 32.0 (32.0) | ? | Não suportado | Não suportado |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support |
41.0 |
32.0 (32.0) | ? | ? | 8.0 |
| SVG | Não suportado | 32.0 (32.0) | ? | Não suportado | Não suportado |