We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Resumo

A propriedade mix-blend-mode descreve como um elemento de conteúdo deve ser mesclado com os elementos abaixo dele no background.

Initial valuenormal
Aplica-se aall elements
Inheritednão
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

 

Veja também

Etiquetas do documento e colaboradores

Etiquetas: 
Colaboradores desta página: mrstork, Sebastianz, afonsoalban
Última atualização por: mrstork,