CSS mix-blend-mode egenskap

Definition och användning

mix-blend-mode egenskapen bestämmer hur elementets innehåll ska blandas med dess direkta förälders bakgrund.

Se också:

CSS-referenshandbok:CSS background-blend-mode egenskap

Exempel

En behållare med röd bakgrund och en bild som blendar med denna röda behållare (mörk):

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

Prova det själv

Du kan hitta fler TIY-exempel längre ner på sidan.

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
normal Detta är standardvärdet. Sätt mixningsmodellen till normal.
multiply Sätt mixningsmodellen till multiply.
screen Sätt mixningsmodellen till screen.
overlay Sätt mixningsmodellen till overlay.
darken Sätt mixningsmodellen till darken.
lighten Sätt mixningsmodellen till lighten.
color-dodge Sätt mixningsmodellen till color-dodge.
color-burn Sätt mixningsmodellen till color-burn.
difference Sätt mixningsmodellen till difference.
exclusion Sätt mixningsmodellen till exclusion.
hue Sätt mixningsmodellen till hue.
saturation Sätt mixningsmodellen till saturation.
color Sätt mixningsmodellen till color.
luminosity Sätt mixningsmodellen till luminosity.

Tekniska detaljer

Standardvärde: normal
Arv: Nej
Animation tillverkning: Stöds inte. Se också:Animationsrelaterade egenskaper.
JavaScript-syntax: object.style.mixBlendMode = "darken"

Mer exempel

Exempel

Visa alla värden:

.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;}

Prova det själv

Exempel

Använd mix-blend-mode för att skapa responsiva cutout/knockout-text (utskärnings-text):

.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;
}

Prova det själv

Webbläsarstöd

Tabellens siffror anger den första webbläsarversion som helt stöder detta egenskap.

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