Proprietà CSS mix-blend-mode

La proprietà CSS mix-blend-mode controlla come il contenuto di un elemento si fonde con il contenuto che si trova dietro di esso — tipicamente il background-color, il background-image del genitore, o un altro elemento sovrapposto. Invece che uno strato copra semplicemente l'altro, il browser combina i pixel con una formula matematica (multiply, screen, difference, e così via), allo stesso modo in cui le modalità di fusione funzionano in Photoshop.

Questa pagina illustra cosa fa ciascuna modalità di fusione, quando è importante il contesto di sovrapposizione, e fornisce esempi eseguibili per i valori più utili.

Come funziona la fusione

Perché la fusione sia visibile è necessario che due livelli si sovrappongano — ad esempio un <img> sopra un <div> colorato. La modalità di fusione mescola quindi i pixel in primo piano con i pixel dello sfondo:

multiply scurisce — il bianco in primo piano scompare, le aree scure rimangono. Ottimo per ombre e tinte.
screen schiarisce — il nero scompare, le aree chiare rimangono. L'inverso di multiply.
overlay combina entrambi: scurisce le aree scure e schiarisce quelle chiare, aumentando il contrasto.
difference / exclusion sottraggono i colori, producendo effetti invertiti ad alto contrasto.
hue, saturation, color, luminosity mescolano un canale del primo piano (tonalità, saturazione, ecc.) con il resto dello sfondo — utili per ricolorare le immagini.

In totale esistono 16 modalità di fusione (elencate nella tabella Valori più avanti).

Contesto di sovrapposizione e isolamento

Impostare qualsiasi valore diverso da normal crea un nuovo contesto di sovrapposizione sull'elemento. L'elemento si fonde solo con il contenuto all'interno di quel contesto di sovrapposizione — non si fonderà con nulla al di fuori di esso. Questo è ciò che impedisce a un elemento con fusione di estendersi all'intera pagina.

Per questo motivo, qualsiasi proprietà che stabilisce un contesto di sovrapposizione (come opacity inferiore a 1, transform, o position con un z-index) può modificare il risultato della fusione. Per impedire deliberatamente a un elemento di fondersi con ciò che si trova dietro di esso, assegna a un antenato la proprietà isolation: isolate — questo crea un contesto di sovrapposizione fresco in modo che la fusione rimanga contenuta.

Suggerimento

If you want to blend an element's background images together, you can use the background-blend-mode property.

Initial Value	normal
Applies to	All elements.
Inherited	No.
Animatable	No.
Version	CSS1
DOM Syntax	object.style.mixBlendMode = "exclusion";

Sintassi

Sintassi della proprietà CSS mix-blend-mode

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;

Esempio della proprietà mix-blend-mode:

Esempio della proprietà CSS mix-blend-mode con il valore multiply

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: multiply</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà mix-blend-mode con il valore "screen":

Esempio della proprietà CSS mix-blend-mode con il valore screen

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: screen;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: screen</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà mix-blend-mode con il valore "color-dodge":

Esempio della proprietà CSS mix-blend-mode con il valore color-dodge

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: color-dodge;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: color-dodge</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà mix-blend-mode con il valore "hue":

Esempio della proprietà CSS mix-blend-mode con il valore hue

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: hue;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hue</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà mix-blend-mode con il valore "normal":

Proprietà CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 500px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: normal;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: normal</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà mix-blend-mode con il valore "hard-light":

Proprietà CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: hard-light;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hard-light</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà mix-blend-mode con il valore "difference":

Proprietà CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: difference;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: difference</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione
normal	Nessuna fusione — l'elemento viene disegnato normalmente sopra lo sfondo. Questo è il valore predefinito.
multiply	Moltiplica i colori; il risultato è sempre più scuro. Il bianco non ha effetto, il nero rimane nero.
screen	Inverte, moltiplica e inverte di nuovo; il risultato è sempre più chiaro. L'opposto di `multiply`.
overlay	`multiply` sulle aree scure e `screen` su quelle chiare — aumenta il contrasto.
darken	Mantiene il colore più scuro tra i due per ciascun canale.
lighten	Mantiene il colore più chiaro tra i due per ciascun canale.
color-dodge	Schiarisce lo sfondo per riflettere il colore in primo piano.
color-burn	Scurisce lo sfondo per riflettere il colore in primo piano.
hard-light	Come `overlay` ma con i livelli scambiati — un effetto faretto intenso.
soft-light	Una versione più morbida di `hard-light`, come un faretto diffuso.
difference	Sottrae il colore più scuro da quello più chiaro; colori uguali producono nero.
exclusion	Simile a `difference` ma con contrasto più basso.
hue	Tonalità del primo piano con saturazione e luminosità dello sfondo.
saturation	Saturazione del primo piano con tonalità e luminosità dello sfondo.
color	Tonalità e saturazione del primo piano con la luminosità dello sfondo — ricolora mantenendo i dettagli.
luminosity	Luminosità del primo piano con tonalità e saturazione dello sfondo.
initial	Imposta la proprietà al valore predefinito (`normal`).
inherit	Eredita il valore dall'elemento genitore.

Proprietà correlate

background-blend-mode — fonde i livelli di sfondo propri di un elemento (immagini e colore) tra loro, anziché con ciò che si trova dietro l'elemento.
isolation — crea un contesto di sovrapposizione in modo che una fusione rimanga contenuta.
opacity e filter — altri modi per modificare come un elemento viene composto.

Esercitazione

Pratica

Cosa succede quando si imposta mix-blend-mode su un valore diverso da 'normal'?

Viene creato un nuovo contesto di sovrapposizione sull'elementoL'elemento si fonde anche con il contenuto al di fuori del suo contesto di sovrapposizioneLe immagini di sfondo dell'elemento si fondono tra loroNon cambia nulla a meno che non sia impostata anche l'opacità

Pratica

Quale modalità di fusione produce sempre un risultato più scuro, dove il bianco in primo piano non ha effetto?

multiplyscreennormalluminosity