La propiedad background-blend-mode define cómo la imagen de fondo del elemento debe combinarse entre sí y con el color de fondo del elemento.
Sintaxis:
background-blend-mode: normal|multiply|screen|darken|lighten| color-dodge|saturation|difference|luminosity|overlay;
Valor por defecto:
- normal
Propiedad:
Normal: Este es el valor predeterminado. Establece el modo de fusión en normal.
- Sintaxis:
background-blend-mode: normal;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-blend-mode Property</title>
<style>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
background-blend-mode: normal;
background-size: contain;
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
- Producción:
Multiplicar: Establece el modo de fusión para multiplicar. Esto conduce a una imagen más oscura que antes.
- Sintaxis:
background-blend-mode: multiply;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-blend-mode Property</title>
<style>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
background-blend-mode: multiply;
background-size: contain;
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
- Producción:
Pantalla: Establece el modo de fusión a pantalla. En este modo, tanto la imagen como el color se invierten, se multiplican y luego se invierten. otra vez.
- Sintaxis:
background-blend-mode: screen;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-blend-mode Property</title>
<style>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
background-blend-mode: screen;
background-size: contain;
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
- Producción:
Oscurecer: Establece el modo de fusión para oscurecer. En este modo, si la imagen de fondo es más oscura que el color de fondo, la imagen se reemplaza; de lo contrario, se deja como estaba.
- Sintaxis:
background-blend-mode: darken;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-blend-mode Property</title>
<style>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
background-blend-mode: darken;
background-size: contain;
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
- Producción:
Aclarar: Establece el modo de fusión para aclarar. En este modo, si la imagen de fondo es más clara que el color de fondo, la imagen se reemplaza; de lo contrario, se deja como estaba.
- Sintaxis:
background-blend-mode: lighten;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-blend-mode Property</title>
<style>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
background-blend-mode: lighten;
background-size: contain;
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
- Producción:
Color-Dodge: Establece el modo de fusión en color-dodge. En este modo, el color de fondo se divide por el inverso de la imagen de fondo. Esto es muy similar al modo de mezcla de pantalla.
- Sintaxis:
background-blend-mode: color-dodge;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-blend-mode Property</title>
<style>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
background-blend-mode: color-dodge;
background-size: contain;
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
- Producción:
Saturación: Establece el modo de fusión para aclarar. Este modo mantiene la saturación de la imagen de fondo mientras mezcla el tono y la luminosidad del color de fondo.
- Sintaxis:
background-blend-mode: saturation;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-blend-mode Property</title>
<style>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
background-blend-mode: saturation;
background-size: contain;
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
- Producción:
Diferencia: Establece el modo de fusión en diferencia. Este modo es el resultado de restar el color más oscuro de la imagen de fondo y el color de fondo del más claro. A menudo, la imagen tendrá un contraste muy alto.
- Sintaxis:
background-blend-mode: difference;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-blend-mode Property</title>
<style>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
background-blend-mode: difference;
background-size: contain;
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
- Producción:
Luminosidad: Establece el modo de fusión en luminosidad. En este modo, la luminosidad del color superior se conserva mientras se utiliza la saturación y el matiz del color de fondo.
- Sintaxis:
background-blend-mode: luminosity;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-blend-mode Property</title>
<style>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
background-blend-mode: luminosity;
background-size: contain;
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
- Producción:
Superposición: establece el modo de fusión en superposición. En este modo, el color de fondo se mezcla con la imagen de fondo para reflejar la claridad u oscuridad del fondo.
- Sintaxis:
background-blend-mode: Overlay;
- Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-blend-mode Property</title>
<style>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
background-blend-mode: overlay;
background-size: contain;
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>
- Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad background-blend-mode se enumeran a continuación:
- Google Chrome 35.0
- Borde 79.0
- Firefox 30.0
- Ópera 22.0
- Apple Safari 8.0
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA