<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.
O tipo básico de dados CSS <blend-mode>
(modo de mesclagem) descreve como as cores devem aparecer, quando objetos se sobrepõem. Usa-se nas propriedades background-blend-mode
e mix-blend-mode
.
Para cada pixel sobreposto, o blend-mode
obtém o valor da cor do pixel da frente e do pixel do fundo, faz um cálculo com esses valores e devolve um novo valor de cor.
Syntaxe
O tipo básico de dados <blend-mode>
é definido usando uma palavra chave escolhida da lista abaixo.
Valores
normal
-
A cor firnal é a do pixel de cima, não importando a cor dor o pixel de baixo. O efeito é como duas folhas de papel opacas se sobrepondo.
multiply
-
A cor final é o resultado da multiplicação das cores de cima e de baixo. Quando uma das camadas for preta, a cor final será preta, enquanto uma camada branca não altera a cor final. O efeito é como duas imagens impressas sobrepostas em um filme transparente.
screen
-
A cor final é o resultado do inverso de cada cor, multiplicados um pelo outro e depois, o inverso desse resultado. Uma camada preta não altera o resultado final, enquanto uma camada branca resulta na cor final branca. O efeito é como o de duas imagens sobrepostas por um projetor, sobre uma tela de projeção.
overlay
-
A cor final será o resultado de
multiply
, se a cor de baixo for mais escura ouscreen
, se a cor de baixo for mais clara. Esteblend-mode
é equivalente ahard-light
mas com as camadas invertidas. darken
-
A cor final é composta pelos valores mais escuros dos canais de cores de cada uma das camadas.
lighten
-
A cor final é composta pelos valores mais claros de cada um dos canais de cores das camadas.
color-dodge
-
A cor final é o resultado da divisão da cor de baixo pelo inverso da cor de cima. Um fundo preto não altera as cores. Uma cor de cima inversa a cor de baixo, resulta em uma cor bastante luminosa. Este
blend-mode
é similar ascreen
, mas a cor de cima precisa ser apenas tão clara quanto o inverso da cor de fundo para deixar o resultado muito luminoso. color-burn
-
A cor final é o inverso da cor do fundo, dividido pelo valor da cor da frente e então inverte-se o resultado final. Se a cor de cima for branca, não haverá alteração. Se a cor de cima for o inverso da cor de baixo, resultará em uma cor preta. Este
blend-mode
é similar aomultiply
, mas a cor de cima precisa apenas ser tão escura quanto o inverso da cor de baixo para fazer o resultado final ser preto. hard-light
-
A cor final é o resultado do
multiply
se a cor de cima for a mais escura, ou o resultado descreen
se a cor de cima for mais clara. Esteblend-mode
é equivalente aooverlay
mas com as camadas invertidas. O efeito é o de iluminar o fundo com um holofote muito forte e intenso. soft-light
-
O resultado final é similar ao de
hard-light
, porém menos intenso. O efeito é o de iluminar o fundo com um holofote difuso. difference
-
The final color is the result of subtracting the darker of the two colors from the lighter one. A black layer has no effect, while a white layer inverts the other layer's color.
exclusion
-
The final color is similar to
difference
, but with less contrast. As withdifference
, a black layer has no effect, while a white layer inverts the other layer's color. hue
-
The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.
saturation
-
The final color has the saturation of the top color, while using the hue and luminosity of the bottom color. A pure gray backdrop, having no saturation, will have no effect.
color
-
The final color has the hue and saturation of the top color, while using the luminosity of the bottom color. The effect preserves gray levels and can be used to colorize the foreground.
luminosity
-
The final color has the luminosity of the top color, while using the hue and saturation of the bottom color. This blend mode is equivalent to
color
, but with the layers swapped.
Interpolation of blend modes
Changes between blends mode are not interpolated. Any change occurs immediately.
Specifications
Specification |
---|
Compositing and Blending Level 2 # ltblendmodegt |
Browser Compatibility
BCD tables only load in the browser
See also
- Properties that use this data type:
background-blend-mode
,mix-blend-mode
- Blend modes