Exemplo
Especifique um modo de mesclagem:
div {
width:
200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image:
linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
background-blend-mode: color-dodge;
} Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade-mistura-modo de fundo define o modo de mesclagem de cada camada de fundo (color and/or image) .
| Valor padrão: | normal |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.backgroundBlendMode="screen" |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35,0 | Não suportado | 30,0 | 7.1 | 22,0 |
CSS Syntax
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| normal | Este é o padrão. Define o modo de mistura ao normal | Jogue " |
| multiply | Define o modo de mesclagem para multiplicar | Jogue " |
| screen | Define o modo de mistura para a tela | Jogue " |
| overlay | Define o modo de mesclagem para sobrepor | Jogue " |
| darken | Define o modo de mesclagem para escurecer | Jogue " |
| lighten | Define o modo de mistura para clarear | Jogue " |
| color-dodge | Define o modo de mesclagem para cor-dodge | Jogue " |
| saturation | Define o modo de mesclagem para a saturação | Jogue " |
| color | Define o modo de mesclagem para colorir | Jogue " |
| luminosity | Define o modo de mistura para luminosidade | Jogue " |
Páginas relacionadas
CSS tutorial: Background CSS