Proprietà background-blend-mode CSS

Definizione e uso

background-blend-mode L'attributo definisce il modo di mescolamento di ogni strato di sfondo (colore e/o immagine).

Vedi anche:

Guida CSS:Sfondo CSS

Esempio

Specificare il modo di mescolamento dell'immagine di sfondo come "lighten" (sbiancare):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

Prova personalmente

Puoi vedere più esempi TIY alla fine della pagina.

Sintassi CSS

background-blend-mode: normale|moltiplicare|schermo|copertura|sbiancare|oscurare|color dodge|saturazione|colore|luminosità;

Valore dell'attributo

Valore Descrizione
normal Predefinito. Imposta il modo di mescolamento su normale.
multiply Imposta il modo di mescolamento su multiply (moltiplicare).
screen Imposta il modo di mescolamento su screen (schermo).
overlay Imposta il modo di mescolamento su overlay (copertura).
darken Imposta il modo di mescolamento su overlay (copertura).
lighten Imposta il modo di mescolamento su lighten (sbiancare).
color-dodge Imposta il modello di mescolanza su color-dodge (riduzione del colore).
saturation Imposta il modello di mescolanza su saturation (saturnazione).
color Imposta il modello di mescolanza su color (colore).
luminosity Imposta il modello di mescolanza su luminosity (luce).

Dettagli tecnici

Valore predefinito: normal
Ereditarietà: No
Creazione dell'animazione: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.backgroundBlendMode="screen"

Più esempi

Esempio

Imposta il modello di mescolanza su "multiply":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

Prova personalmente

Esempio

Imposta il modello di mescolanza su "screen":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

Prova personalmente

Esempio

Imposta il modello di mescolanza su "overlay":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

Prova personalmente

Esempio

Imposta il modello di mescolanza su "darken":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

Prova personalmente

Esempio

Imposta il modello di mescolanza su "color-dodge":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

Prova personalmente

Esempio

Imposta il modello di mescolanza su "saturation":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

Prova personalmente

Esempio

Imposta il modello di mescolanza su "color":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

Prova personalmente

Esempio

Imposta il modello di mescolanza su "luminosity":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

Prova personalmente

Esempio

Imposta il modello di mescolanza su "normal":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

Prova personalmente

Supporto del browser

Le numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1