mix-blend-mode per la fusione dei livelli
Fonda i colori degli elementi con il contenuto sottostante usando in CSS modalità di fusione simili a quelle di Photoshop.
mix-blend-mode per la fusione dei livelli è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Che cos'è mix-blend-mode?
mix-blend-mode controlla il modo in cui i pixel di un elemento si fondono con i pixel degli elementi sottostanti, in modo simile alle modalità di fusione dei livelli di Photoshop. Influisce sull'intero elemento, compreso lo sfondo.
Normale (predefinito)
normal è il valore predefinito: non viene applicata alcuna fusione. L'elemento superiore copre ciò che si trova sotto di esso.
multiply
multiply scurisce moltiplicando i valori dei pixel. Il bianco diventa trasparente, mentre il nero rimane nero. È ideale per sovrapporre immagini dai toni scuri a sfondi colorati.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
screen
screen è l'inverso di multiply: schiarisce. Il nero diventa trasparente, mentre il bianco rimane bianco. È adatto per effetti luminosi e bagliori.
<div class="blend-wrapper">
<div class="glow"></div>
</div>
overlay
overlay combina multiply e screen. Le aree scure diventano più scure e quelle chiare più chiare. Aumenta il contrasto preservando i mezzitoni.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
difference
difference sottrae i colori. Colori identici producono il nero, mentre colori opposti producono il bianco. Crea effetti psichedelici ad alto contrasto.
<div class="blend-wrapper"><span class="inverted-text">Invert Me</span></div>
Hard Light e Soft Light
hard-light applica multiply o screen a seconda del colore sorgente. soft-light è una versione più morbida, con un aumento del contrasto inferiore.
Modalità di fusione dei colori
Queste modalità fondono solo determinate proprietà del colore:
hue— prende la tonalità dall'elemento superiore e la saturazione e la luminosità da quello sottostantesaturation— prende la saturazione dall'elemento superiorecolor— prende tonalità e saturazione dall'elemento superiore e la luminosità da quello sottostanteluminosity— prende la luminosità dall'elemento superiore
Modalità color per il duotono
Crei immagini in duotono sovrapponendo un elemento colorato con mix-blend-mode: color:
<div class="duotone"></div>
Effetto testo invertito
Testo che appare invertito su qualsiasi sfondo:
<div class="blend-wrapper"><span class="inverted-label">Adaptive Label</span></div>
Contesti di impilamento e modalità di fusione
mix-blend-mode esegue la fusione con gli elementi presenti nello stesso contesto di impilamento. La proprietà isolation: isolate su un elemento padre crea un nuovo contesto di impilamento, impedendo alle modalità di fusione di influire sugli elementi esterni al gruppo isolato.
Verifica rapida
Quale modalità di fusione rende trasparenti le parti bianche di un elemento e preserva le aree colorate o scure, come la carta trasparente?
Riepilogo
mix-blend-mode fonde i pixel di un elemento con il contenuto sottostante. Modalità principali: multiply (scurisce, il bianco → trasparente), screen (schiarisce, il nero → trasparente), overlay (aumenta il contrasto), difference (sottrae), color (ricolora le immagini). Utilizzi isolation: isolate sull'elemento padre per limitare l'ambito della fusione.
Domande Frequenti
La lezione «mix-blend-mode per la fusione dei livelli» è gratuita?
Sì — il testo completo di «mix-blend-mode per la fusione dei livelli» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «mix-blend-mode per la fusione dei livelli»?
Fonda i colori degli elementi con il contenuto sottostante usando in CSS modalità di fusione simili a quelle di Photoshop. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «mix-blend-mode per la fusione dei livelli»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- filter: blur, brightness, contrast, grayscale
- backdrop-filter per l'effetto vetro smerigliato
- mix-blend-mode per la fusione dei livelli
- Proprietà isolation