Ejemplo
Especificar un modo de fusión:
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;
} Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad-mezcla-modo de fondo define el modo de fusión de cada capa de fondo (color and/or image) .
| Valor por defecto: | normal |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.backgroundBlendMode="screen" |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | No soportado | 30.0 | 7.1 | 22.0 |
sintaxis CSS
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| normal | Esta es la opción predeterminada. Establece el modo de fusión a la normalidad | Juegalo " |
| multiply | Establece el modo de fusión multiplicar | Juegalo " |
| screen | Establece el modo de fusión a la pantalla | Juegalo " |
| overlay | Establece el modo de fusión de la superposición | Juegalo " |
| darken | Establece el modo de fusión a oscurecerse | Juegalo " |
| lighten | Establece el modo de fusión para aligerar | Juegalo " |
| color-dodge | Establece el modo de fusión a color de esquivar | Juegalo " |
| saturation | Establece el modo de fusión a la saturación | Juegalo " |
| color | Establece el modo de mezcla a Color | Juegalo " |
| luminosity | Establece el modo de fusión a la luminosidad | Juegalo " |
Páginas relacionadas
CSS tutorial: Antecedentes CSS