MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

A propriedade CSS background-blend-mode descreve como as imagens de fundo do elemento devem se misturar entre si e a cor de fundo do elemento.

/* Um valor */
background-blend-mode: normal;

/* Dois valores, um por fundo */
background-blend-mode: darken, luminosity;

/* Valores globais */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

Os modos de mistura devem ser definidos na mesma ordem que a propriedade CSS background-image. Se os comprimentos da lista dos modos de mistura e das imagens de fundo não forem iguais, ele será repetido e/ou truncado até que os comprimentos correspondam.

Initial valuenormal
Aplica-se aAll elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line.
Inheritednão
Midianone
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

Valores

<blend-mode>
É um <blend-mode> denotando o modo de mesclagem a ser aplicado. Pode haver vários valores, separados por vírgulas.

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

Especificações

Especificação Status Comentário
Compositing and Blending Level 1
The definition of 'background-blend-mode' in that specification.
Candidata a Recomendação Initial definition

Compatibilidade dos navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 35 30.0 (30.0) Não suportado 22 7.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Não suportado 30.0 (30.0) Não suportado 22 8

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: tadeubarbosa
 Última atualização por: tadeubarbosa,