mix-blend-mode para mezclar capas
Mezcle los colores de los elementos con el contenido subyacente mediante modos de fusión de CSS al estilo de Photoshop.
mix-blend-mode para mezclar capas es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es mix-blend-mode?
mix-blend-mode controla cómo se mezclan los píxeles de un elemento con los píxeles de los elementos subyacentes, de forma similar a los modos de fusión de capas de Photoshop. Afecta a todo el elemento, incluido su fondo.
Normal (predeterminado)
normal es el valor predeterminado: no se aplica ninguna mezcla. El elemento superior cubre todo lo que se encuentra debajo.
multiply
multiply oscurece al multiplicar los valores de los píxeles. El blanco se vuelve transparente; el negro permanece negro. Es ideal para colocar imágenes de tonos oscuros sobre fondos de colores.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
screen
screen es el inverso de multiply: aclara la imagen. El negro se vuelve transparente; el blanco permanece blanco. Es adecuado para efectos de luz y resplandores.
<div class="blend-wrapper">
<div class="glow"></div>
</div>
overlay
overlay combina multiply y screen. Las áreas oscuras se oscurecen y las claras se aclaran. Aumenta el contraste y conserva los tonos medios.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
difference
difference resta los colores. Los colores idénticos producen negro; los colores opuestos producen blanco. Crea efectos psicodélicos de alto contraste.
<div class="blend-wrapper"><span class="inverted-text">Invert Me</span></div>
Hard Light y Soft Light
hard-light aplica multiply o screen según el color de origen. soft-light es una versión más suave, con un aumento de contraste menor.
Modos de fusión de color
Estos modos mezclan únicamente determinadas propiedades del color:
hue— toma el tono del elemento superior y la saturación y luminosidad del inferiorsaturation— toma la saturación del elemento superiorcolor— toma el tono y la saturación del elemento superior y la luminosidad del inferiorluminosity— toma la luminosidad del elemento superior
Modo color para duotono
Cree imágenes duotono superponiendo un elemento de color con mix-blend-mode: color:
<div class="duotone"></div>
Efecto de texto invertido
Texto que aparece invertido sobre cualquier fondo:
<div class="blend-wrapper"><span class="inverted-label">Adaptive Label</span></div>
Contextos de apilamiento y modo de fusión
mix-blend-mode se mezcla con los elementos del mismo contexto de apilamiento. La propiedad isolation: isolate en un elemento principal crea un nuevo contexto de apilamiento e impide que los modos de fusión afecten a los elementos que están fuera del grupo aislado.
Comprobación rápida
¿Qué modo de fusión hace transparentes las partes blancas de un elemento y conserva las áreas coloreadas u oscuras, como el papel transparente?
Resumen
mix-blend-mode mezcla los píxeles de un elemento con el contenido subyacente. Modos principales: multiply (oscurece; blanco → transparente), screen (aclara; negro → transparente), overlay (aumenta el contraste), difference (resta) y color (cambia el color de las imágenes). Use isolation: isolate en el elemento principal para limitar el ámbito de la mezcla.
Preguntas frecuentes
¿La lección «mix-blend-mode para mezclar capas» es gratis?
Sí — el texto completo de «mix-blend-mode para mezclar capas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «mix-blend-mode para mezclar capas»?
Mezcle los colores de los elementos con el contenido subyacente mediante modos de fusión de CSS al estilo de Photoshop. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «mix-blend-mode para mezclar capas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- filter: blur, brightness, contrast y grayscale
- backdrop-filter para efecto de vidrio esmerilado
- mix-blend-mode para mezclar capas
- Propiedad isolation