Los modos de fusión se utilizan para determinar cómo dos capas (color y/o imagen) se fusionan entre sí. En este artículo, veremos cómo combinar un elemento usando CSS.
Enfoque: en CSS, hay dos propiedades que nos permiten mezclar el color y/o la imagen:
1. Uso de la propiedad mix-blend-mode: la propiedad mix-blend-mode se usa para combinar el elemento y los elementos que están detrás de él.
Sintaxis:
mezcla-mezcla-modo: normal | multiplicar | pantalla | esquivar el color | diferencia | oscurecer | aligerar | saturación | luminosidad | superposición | luz dura | luz suave | exclusión | matiz | quemadura de color | color;
Ejemplo: El siguiente ejemplo demuestra la combinación del elemento HTML div con una imagen de fondo que se menciona en la parte CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.divName1 {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210622101607/image1.png");
text-align: center;
background-size: 1400px 360px;
}
.divName1 h3 {
margin: 0;
font-size: 4.8rem;
text-transform: uppercase;
line-height: 1.9;
color: green;
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<center>
<div class="divName1">
<h3>Geeks for Geeks</h3>
</div>
</center>
</body>
</html>
Producción:
Salida del código
2. Uso de la propiedad background-blend-mode: la propiedad background-blend-mode se usa para combinar la imagen de fondo y sus elementos de color de fondo.
Sintaxis:
modo de mezcla de fondo: normal | multiplicar | pantalla | esquivar el color | diferencia | oscurecer | aligerar | saturación | luminosidad | superposición | luz dura | luz suave | exclusión | matiz | quemadura de color | color;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#divName1 {
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/20210622101952/circle.png"),
url("https://media.geeksforgeeks.org/wp-content/uploads/20210622102302/dog1.png");
background-blend-mode: multiply;
}
</style>
</head>
<body>
<center>
<h2> background-blend-mode</h2>
<div id="divName1"></div>
</center>
</body>
</html>
Producción:
Salida del código
Publicación traducida automáticamente
Artículo escrito por thesahilrai y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA