Propiedad CSS background-blend-mode
Ejemplo
Modo de fusión:
div {
width: 290px;
height: 69px;
background-size: 290px 69px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, green 0%, white 100%), url('logo.png');
background-blend-mode: color-dodge;
}
width: 290px;
height: 69px;
background-size: 290px 69px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, green 0%, white 100%), url('logo.png');
background-blend-mode: color-dodge;
}
Pruébalo »
Definición y uso
La propiedad background-blend-mode define el modo de fusión de las capas de fondo (imagen y color).
| Valor predeterminado: | normal |
|---|---|
| Inherited: | no |
| Animatable: | no. Veranimatable |
| Versión: | CSS3 |
| Sintaxis de JavaScript: | object.style.backgroundBlendMode="screen" |
Soporte del navegador
Los números en la tabla indican la versión del primer navegador que admite esta propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | No compatible | 30.0 | 7.1 | 22.0 |
Sintaxis CSS
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Valores de la propiedad
| Valor | Descripción | Ejemplo |
|---|---|---|
| normal | Valor predeterminado. Establece el modo de fusión normal. | Pruébalo » |
| multiply | Modo multiplicar. | Pruébalo » |
| screen | Modo trama (screen). | Pruébalo » |
| overlay | Modo superponer. | Pruébalo » |
| darken | Modo oscurecer. | Pruébalo » |
| lighten | Modo aclarar. | Pruébalo » |
| color-dodge | Modo sobreexponer (color dodge). | Pruébalo » |
| saturation | Modo saturación. | Pruébalo » |
| color | Modo color. | Pruébalo » |
| luminosity | Modo luminosidad. | Pruébalo » |
Artículos relacionados
Tutorial de CSS:Fondo CSS
Otras extensiones