Definición de .background-blend-mode aplicado en CSS
La propiedad .background-blend-mode define cómo la imagen de fondo de un elemento debe combinarse con su color de fondo:
Ejemplo de uso de la propiedad background-blend-mode
Esta propiedad de CSS habitualmente se utiliza de esta forma:
.container {
background-image: url('image.jpg');
background-color: red;
background-blend-mode: screen;
}Otro ejemplo más avanzado de .background-blend-mode es el siguiente de CODEPEN:
Sintaxis de .background-blend-mode en CSS
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| normal | Esto es predeterminado. Establece el modo de fusión en normal | |
| multiplicar | Establece el modo de fusión para multiplicar | |
| pantalla | Establece el modo de fusión a la pantalla | |
| cubrir | Establece el modo de fusión en superposición | |
| oscurecer | Establece el modo de fusión para oscurecer | |
| aligerar | Establece el modo de fusión para aclarar | |
| esquivar el color | Establece el modo de fusión en color-dodge | |
| saturación | Establece el modo de fusión a saturación | |
| color | Establece el modo de fusión en color. | |
| luminosidad | Establece el modo de fusión en luminosidad. |
Exploradores compatibles con .background-blend-mode
Los números de la tabla especifican la primera versión del navegador que es plenamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
