Sintassi

Significato dei valori principali:

• normal: Nessuna fusione tra i livelli, che vengono sovrapposti normalmente, senza alterazioni nei colori. È il comportamento predefinito.

• multiply: I colori dei livelli si moltiplicano, scurendo l'immagine risultante. Se un livello è bianco, non ha alcun effetto; se è nero, diventa completamente nero.

• screen: L'effetto opposto a multiply: i colori dei livelli si "schiariscono", creando un risultato luminoso. Funziona come un’esposizione fotografica più lunga.

• overlay: Una combinazione di multiply e screen, che aumenta il contrasto, scurendo le aree scure e schiarendo quelle chiare. Questo crea un effetto vivace e dinamico.

• darken: Mantiene il colore più scuro tra i livelli sovrapposti. Le aree scure prevalgono, rendendo l'immagine finale più intensa e profonda.

• lighten: Mantiene il colore più chiaro tra i livelli sovrapposti. Le aree chiare prevalgono, creando un'immagine più luminosa e morbida.

• color-dodge: Aumenta la luminosità dei colori sovrapposti, creando un effetto di fusione che schiarisce e aumenta il contrasto.

• color-burn: Aumenta il contrasto, scurendo l'immagine e creando effetti più intensi, con un look simile alla sovrapposizione di colori saturi.

• difference: Crea un effetto di fusione più astratto e creativo, basato sulla differenza tra i colori dei livelli. Il risultato è un contrasto molto forte.

• exclusion: Produce un effetto simile a difference, ma con un contrasto meno intenso, risultando in un effetto più morbido e sfumato.

Esempio proprietà: background-blend-mode

Codice Esempio: background-blend-mode

CODE: CSS

1. .blend-mode-box {

2.   width: 100%;

3.   max-width: 600px;

4.   height: 300px;

5.   background-color: #ffcc00;

6.   background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb');

7.   background-size: cover;

8.   background-blend-mode: multiply;

9.   color: white;

10.   font-size: 24px;

11.   display: flex;

12.   align-items: center;

13.   justify-content: center;

14.   border-radius: 10px;

15.   text-align: center;

16. }

Contenuto Esempio: background-blend-mode

  
  <style>
    .blend-mode-box {
      width: 100%;
      max-width: 600px;
      height: 300px;
      background-color: #ffcc00;
      background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb');
      background-size: cover;
      background-blend-mode: multiply;
      color: white;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      text-align: center;
    }
  </style>

  <div class="blend-mode-box">
    Effetto multiply con <code>background-blend-mode</code>
  </div>
  

Considerazioni aggiuntive:

• Performance: Su dispositivi mobili o browser meno potenti, l'uso di modalità di fusione può comportare un aumento dell'uso della CPU/GPU e potrebbe rallentare il rendering delle pagine.

• Immagini e colori di sfondo: La modalità di fusione funziona solo se sono presenti almeno due livelli di sfondo (ad esempio, un'immagine e un colore di sfondo). Se hai solo un'immagine o un colore, non verrà applicato alcun effetto visivo.

• Supporto per l'accessibilità: In alcuni casi, le modalità di fusione potrebbero ridurre il contrasto di determinati colori, rendendo il testo più difficile da leggere. È sempre una buona idea testare l'accessibilità del sito, soprattutto per utenti con difficoltà visive.

In sintesi:

• background-blend-mode: È ampiamente supportato dai browser moderni, ma non è compatibile con Internet Explorer e versioni più vecchie di alcuni altri browser. È bene fare dei test, specialmente se si prevede di usare questa proprietà in un'applicazione di produzione.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser