CSS mix-blend-mode egenskab

Definition og brug

mix-blend-mode egenskab definerer, hvordan elementets indhold skal blande sig med dens direkte forældrebaggrund.

Se også:

CSS reference manual:CSS background-blend-mode egenskab

实例

En beholder med rød baggrund og et billede, der blander sig med denne røde beholder (mørk):

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

亲自试一试

Du kan finde flere TIY-eksempler nedenfor på siden.

CSS syntaks

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

Attributværdi

Værdi Beskrivelse
normal Dette er standardværdien. Sæt blandingstil til normal.
multiply Sæt blandingstil til multiply.
screen Sæt blandingstil til screen.
overlay Sæt blandingstil til overlay.
darken Sæt blandingstil til darken.
lighten Sæt blandingstil til lighten.
color-dodge Sæt blandingstil til color-dodge.
color-burn Sæt blandingstil til color-burn.
difference Sæt blandingstil til difference.
exclusion Sæt blandingstil til exclusion.
hue Sæt blandingstil til hue.
saturation Sæt blandingstil til saturation.
color Sæt blandingstil til color.
luminosity Sæt blandingstil til luminosity.

Tekniske detaljer

Standardværdi: normal
Arv: Nej
Animationproduktion: Ikke understøttet. Se også:Animationsrelaterede egenskaber.
JavaScript syntaks: object.style.mixBlendMode = "darken"

Flere eksempler

实例

Vis alle værdier:

.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