Propiedad CSS background-blend-mode
La propiedad background-blend-mode es una propiedad CSS que define la mezcla de las imágenes de fondo entre sí y con el color de fondo. Tiene 10 valores: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity. El valor predeterminado es normal.
Si hay varias capas de fondo y tienen una lista especificada de modos de mezcla, background-blend-mode debe aplicarse en el mismo orden que background-image. Si no hay suficientes valores para coincidir con el número de capas, la lista de valores debe repetirse hasta que haya suficientes.
La propiedad background-blend-mode se utiliza para mezclar las capas de fondo.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.backgroundBlendMode = "luminosity"; |
Sintaxis
Sintaxis de la propiedad CSS background-blend-mode
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;Ejemplo de la propiedad background-blend-mode:
Ejemplo de la propiedad CSS background-blend-mode con el valor normal
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://es.w3docs.com/build/images/w3docs-logo-black.png"), url("https://es.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: normal;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Resultado
En el siguiente ejemplo, prueba y observa cómo se mezclan las imágenes de fondo:
Ejemplo de la propiedad background-blend-mode con el valor "screen":
Ejemplo de la propiedad CSS background-blend-mode con el valor screen
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://es.w3docs.com/build/images/w3docs-logo-black.png"), url("https://es.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: screen;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ejemplo de la propiedad background-blend-mode con el valor "color-dodge":
Ejemplo de la propiedad CSS background-blend-mode con el valor color-dodge
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://es.w3docs.com/build/images/w3docs-logo-black.png"), url("https://es.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: color-dodge;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ejemplo de la propiedad background-blend-mode con el valor "multiply":
Ejemplo de la propiedad CSS background-blend-mode con el valor multiply
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://es.w3docs.com/build/images/w3docs-logo-black.png"), url("https://es.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: multiply;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ejemplo de la propiedad background-blend-mode con el valor "overlay":
Ejemplo de la propiedad background-blend-mode con el valor "overlay":
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://es.w3docs.com/build/images/w3docs-logo-black.png"), url("https://es.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: overlay;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ejemplo de la propiedad background-blend-mode con el valor "darken":
Ejemplo de la propiedad background-blend-mode con el valor "darken":
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://es.w3docs.com/build/images/w3docs-logo-black.png"), url("https://es.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: darken;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ejemplo de la propiedad background-blend-mode con el valor "saturation":
Ejemplo de la propiedad background-blend-mode con el valor "saturation":
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://es.w3docs.com/build/images/w3docs-logo-black.png"), url("https://es.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: saturation;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| normal | Establece el modo de mezcla en normal. | Probarlo » |
| multiply | Establece el modo de mezcla en multiply. | Probarlo » |
| screen | Establece el modo de mezcla en screen. | Probarlo » |
| overlay | Establece el modo de mezcla en overlay. | Probarlo » |
| darken | Establece el modo de mezcla en darken. | Probarlo » |
| lighten | Establece el modo de mezcla en lighten. | Probarlo » |
| color-dodge | Establece el modo de mezcla en color-dodge. | Probarlo » |
| saturation | Establece el modo de mezcla en saturation. | Probarlo » |
| color | Establece el modo de mezcla en color. | Probarlo » |
| luminosity | Establece el modo de mezcla en luminosity. | Probarlo » |
Práctica
¿Qué hace la propiedad CSS background-blend-mode?