Proprietà mix-blend-mode CSS

Definizione e uso

L'attributo mix-blend-mode determina come il contenuto dell'elemento deve mescolarsi con lo sfondo del suo padre diretto.

Vedi anche:

Manuale di riferimento CSS:Proprietà background-blend-mode CSS

实例

Contenitore con sfondo rosso e immagine mescolata con questo contenitore (oscurato):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: oscuramento;
}

亲自试一试

Troverai più esempi TIY in fondo alla pagina.

Sintassi CSS

mix-blend-mode: normal|moltiplicazione|schermo|sovrapposizione|oscuramento|illuminazione|evitamento del colore|bruciatura del colore|differenza|esclusione|tonalità|saturazione|colore|luminosità;

Valore dell'attributo

Valore Descrizione
normal Questo è il valore predefinito. Imposta il modo di mescolaggio su normale.
moltiplicazione Imposta il modo di mescolaggio su moltiplicazione.
schermo Imposta il modo di mescolaggio su schermo.
sovrapposizione Imposta il modo di mescolaggio su sovrapposizione.
oscuramento Imposta il modo di mescolaggio su oscuramento.
illuminazione Imposta il modo di mescolaggio su illuminazione.
evitamento del colore Imposta il modo di mescolaggio su evitamento del colore.
bruciatura del colore Imposta il modo di mescolaggio su bruciatura del colore.
differenza Imposta il modo di mescolaggio su differenza.
esclusione Imposta il modo di mescolaggio su esclusione.
tonalità Imposta il modo di mescolaggio su tonalità.
saturazione Imposta il modo di mescolaggio su saturazione.
colore Imposta il modo di mescolaggio su colore.
luminosità Imposta il modo di mescolaggio su luminosità.

Dettagli tecnici

Valore predefinito: normal
Ereditarietà: No
Produzione di animazioni: Non supportato. Vedi anche:Proprietà relative all'animazione.
Sintassi JavaScript: object.style.mixBlendMode = "darken"

Più esempi

实例

Mostra tutti i valori:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

亲自试一试

实例

使用 mix-blend-mode 来创建响应式 cutout/knockout 文本（抠图文本）：

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

亲自试一试

浏览器支持

数字在表格中注明了完全支持该属性的首个浏览器版本。

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0