Esempio
Specificare un metodo di fusione:
div {
width:
200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image:
linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
background-blend-mode: color-dodge;
} Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà background-blend-mode definisce il metodo di fusione di ogni livello di sfondo (color and/or image) .
| Valore di default: | normal |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.backgroundBlendMode="screen" |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | Non supportato | 30,0 | 7.1 | 22.0 |
CSS Sintassi
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| normal | Questa è l'impostazione predefinita. Imposta il metodo di fusione alla normalità | Gioca " |
| multiply | Imposta il metodo di fusione a moltiplicarsi | Gioca " |
| screen | Imposta il metodo di fusione per lo screening | Gioca " |
| overlay | Imposta il metodo di fusione per sovrapporre | Gioca " |
| darken | Imposta il metodo di fusione per scurire | Gioca " |
| lighten | Imposta il metodo di fusione per schiarire | Gioca " |
| color-dodge | Imposta il metodo di fusione di colore Dodge | Gioca " |
| saturation | Imposta il metodo di fusione a saturazione | Gioca " |
| color | Imposta il metodo di fusione per colorare | Gioca " |
| luminosity | Imposta il metodo di fusione di luminosità | Gioca " |
Pagine correlate
CSS tutorial: Sfondo CSS