Proprietà CSS in background-blend-mode
Esempio
Specificare la modalità di fusione di un'immagine di sfondo da "schiarire":
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La background-blend-mode
proprietà definisce la modalità di fusione di ogni livello di sfondo (colore e/o immagine).
Valore di default: | normale |
---|---|
Ereditato: | no |
Animabile: | no. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.backgroundBlendMode="schermo" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
Property | |||||
---|---|---|---|---|---|
background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
Sintassi CSS
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Valori di proprietà
Value | Description | Play it |
---|---|---|
normal | This is default. Sets the blending mode to normal | |
multiply | Sets the blending mode to multiply | |
screen | Sets the blending mode to screen | |
overlay | Sets the blending mode to overlay | |
darken | Sets the blending mode to darken | |
lighten | Sets the blending mode to lighten | |
color-dodge | Sets the blending mode to color-dodge | |
saturation | Sets the blending mode to saturation | |
color | Sets the blending mode to color | |
luminosity | Sets the blending mode to luminosity |
Altri esempi
Esempio
Specificare la modalità di fusione da "moltiplicare":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
Esempio
Specificare la modalità di fusione come "schermo":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
Esempio
Specificare la modalità di fusione da "sovrapporre":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
Esempio
Specificare la modalità di fusione da "scurire":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
Esempio
Specifica la modalità di fusione in modo che sia "schiva colore":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}
Esempio
Specificare la modalità di fusione come "saturazione":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
Esempio
Specificare la modalità di fusione come "colore":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
Esempio
Specificare la modalità di fusione come "luminosità":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
Esempio
Specificare la modalità di fusione come "normale":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
Pagine correlate
Tutorial CSS: Sfondo CSS