Właściwość mix-blend-mode

Właściwość mix-blend-mode ustawia tryb mieszania koloru źródłowego z kolorem tła lub obrazem tła. Wartości właściwości są analogiczne do głównych trybów programów graficznych.

Składnia

cssselektor {
  mix-blend-mode: wartości;
}

W tabeli przedstawiono główne wartości dla właściwości mix-blend-mode:

Wartości

Wartość	Opis
`normal`	Normalny. Nie jest używane mieszanie kolorów. Tryb domyślny.
`multiply`	Mnożenie. W tym trybie wartość koloru podstawowego jest mnożona przez wartość koloru nałożonego. Kolor wynikowy zawsze jest kolorem ciemniejszym.
`screen`	Rozjaśnianie. W tym trybie mnożone są odwrotne wartości koloru podstawowego i nałożonego. Jako kolor wynikowy zawsze stosowany jest jaśniejszy kolor.
`overlay`	Nakładanie. W tym trybie kolory są mnożone lub rozjaśniane w zależności od koloru podstawowego. Wzory lub kolory nakładają się na istniejące piksele, pozostawiając niezmienione jasne i ciemne obszary koloru podstawowego.

Przykład

Spójrzmy, jak będzie wyglądać obraz z wartością domyślną właściwości mix-blend-mode:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

Przykład

A teraz zmieńmy tryb mieszania na mnożenie:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

Przykład

Ustawmy właściwości mix-blend-mode wartość nakładania:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

Zobacz też

właściwość background,
która jest właściwością skrótową dla tła
właściwość background-image,
za pomocą której blokowi można ustawić obraz tła
właściwość background-blend-mode,
za pomocą której można nałożyć obraz tła na kolor tła