CSS właściwość mix-blend-mode

Definicja i użycie

Atrybut mix-blend-mode określa, jak zawartość elementu powinna się mieszać z tłem bezpośredniego rodzica.

Zobacz również:

CSS Reference Manual:Atrybut background-blend-mode CSS

Przykład

Kontener z czerwonym tłem oraz obrazem wtapiającym się z tym czerwonym kontenerem (ciemny):

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

Spróbuj sam

Więcej przykładów TIY można znaleźć na dole strony.

Gramatyka CSS

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

Wartość atrybutu

Wartość Opis
normal To jest domyślna wartość. Ustaw tryb mieszania na normal.
multiply Ustaw tryb mieszania na multiply.
screen Ustaw tryb mieszania na screen.
overlay Ustaw tryb mieszania na overlay.
darken Ustaw tryb mieszania na darken.
lighten Ustaw tryb mieszania na lighten.
color-dodge Ustaw tryb mieszania na color-dodge.
color-burn Ustaw tryb mieszania na color-burn.
difference Ustaw tryb mieszania na difference.
exclusion Ustaw tryb mieszania na exclusion.
hue Ustaw tryb mieszania na hue.
saturation Ustaw tryb mieszania na saturation.
color Ustaw tryb mieszania na color.
luminosity Ustaw tryb mieszania na luminosity.

Szczegóły techniczne

Domyślna wartość: normal
Inherencja: Nie
Tworzenie animacji: Nie obsługuje. Zobacz:Atrybuty animacji.
Gramatyka JavaScript: object.style.mixBlendMode = "darken"

Więcej przykładów

Przykład

Pokazanie wszystkich wartości:

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

Spróbuj sam

Przykład

Użyj mix-blend-mode do tworzenia responsywnego tekstu z wycięciem/knockout (tekst wycięty):

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

Spróbuj sam

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

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