Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Esta clase se usa para especificar cómo se debe combinar el contenido de un elemento con el fondo. En CSS, podemos hacerlo usando la propiedad mix-blend-mode de CSS.
Mezclar clases de modo de fusión:
- mix-blend-normal: No se aplica mezcla al elemento.
- mix-blend-multiply: Esto multiplica el color del elemento con el fondo. El color resultante es siempre tan oscuro como el fondo.
- mix-blend-screen : Esto multiplica el color del elemento con el fondo y luego complementa el resultado. El color resultante es siempre tan brillante como una de las capas mezcladas.
- mix-blend-exclusion: Esto resta el más oscuro de dos colores del color más claro del elemento. El resultado es similar a ‘diferencia’ pero con menor contraste.
- mezclar-mezclar-superponer: Esto aplica ‘multiplicar’ en colores más claros y ‘pantalla’ en colores más oscuros en el elemento. El efecto es efectivamente lo contrario de ‘luz dura’.
- mix-blend-darken : Esto reemplaza el fondo con el color del elemento donde el elemento es más oscuro.
- mix-blend-lighten : Esto reemplaza el fondo con el color del elemento donde el elemento es más claro.
- mix-blend-color-dodge: esto aclara el color de fondo para reflejar el color del elemento.
- mix-blend-color-burn : Esto oscurece el color de fondo para reflejar los colores naturales de la imagen. El resultado ha aumentado la cantidad de contraste entre el elemento y el fondo.
- mix-blend-hard-light: Esto aplica ‘multiplicar’ en colores más claros y ‘pantalla’ en colores más oscuros del elemento. Este efecto es efectivamente lo contrario de ‘superposición’.
- mix-blend-soft-light : Esto aplica ‘multiplicar’ en colores más claros y ‘pantalla’ en colores más oscuros en el elemento. El efecto resultante es más suave que el de ‘superposición’.
- mix-blend-difference: Esto resta la diferencia absoluta entre el color de fondo y el color del elemento.
- mix-blend-hue : Esto aplica el tono del elemento con la saturación y luminosidad del fondo.
- mix-blend-saturation: Esto aplica la saturación del elemento con el tono y la luminosidad del fondo.
- mix-blend-color: Esto aplica el tono y la saturación del elemento con la luminosidad del fondo.
- mezclar-mezclar-luminosidad: Esto aplica la luminosidad del elemento con el tono y la saturación del fondo.
Sintaxis:
<div class="mix-blend-{mode}" >
...
</div>
Nota: La propiedad CSS mix-blend-mode establece cómo se debe combinar el contenido de un elemento con el contenido del padre del elemento y el fondo del elemento.
Ejemplo 1: el siguiente código usa las clases mix-blend-normal, mix-blend-multiply, mix-blend-overlay .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="m-auto bg-pink-100 w-2/6 h-25 p-3"> <h3 class="text-center"> mix-blend-mode </h3> <div class="mix-blend-normal p-8"> <h1>normal</h1> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> </div> <div class="mix-blend-multiply p-8"> <h1>multiply</h1> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> </div> <div class="mix-blend-overlay p-8"> <h1>overlay</h1> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"> </div> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente código usa mix-blend-exclusion, mix-blend-color-burn y mix-blend-hard-light .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="m-auto bg-pink-100 w-2/6 h-25 p-3"> <h1 class="text-center text-xl "> mix-blend-mode </h1> <div class="mix-blend-color-burn p-8"> <h1>color-burn</h1> <img class="h-35" src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" /> </div> <div class="mix-blend-hard-light p-8"> <h1>hard-light</h1> <img class="h-40" src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" /> </div> <div class="mix-blend-exclusion p-8"> <h1>exclusion</h1> <img class="h-40" src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" /> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA