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

Właściwość background-blend-mode ustawia tryb mieszania obrazu tła z kolorem tła lub innymi obrazami. We właściwości tej można również podać kilka wartości oddzielonych przecinkami, które będą stosowane w tej samej kolejności. Wartości dla właściwości są analogiczne do głównych trybów programów graficznych.

Składnia

cssselektor {
  background-blend-mode: tryby;
}

W tabeli przedstawiono główne wartości dla właściwości background-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. Wynikowy kolor jest zawsze 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 background-blend-mode:

html<div id="elem"></div>

css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Przykład

A teraz zmieńmy wartość właściwości background-blend-mode na mnożenie:

html<div id="elem"></div>

css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Przykład

Ustawmy dla naszego obrazu tryb rozjaśniania:

html<div id="elem"></div>

css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Zobacz też

właściwość background,
reprezentująca właściwość skrótową dla tła
właściwość background-image,
za pomocą której blokowi można nadać obraz tła
właściwość mix-blend-mode,
za pomocą której można nałożyć kolory źródłowe na obraz tła
właściwość backdrop-filter,
która pozwala nakładać filtry