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

Definicja stylu, przeznaczenie i użycie background-blend-mode

Właściwość background-blend-mode określa tryb mieszania pikseli każdej warstwy tła (kolor i / lub obraz).

Wartości właściwości background-blend-mode

Składnia CSS background-blend-mode

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

Wsparcie przeglądarek dla właściwości background-blend-mode

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Właściwość
background-blend-mode	35.0	79.0	30.0	7.1	22.0

Przykładowe zastosowania właściwości background-blend-mode

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

#myDIV {
  width: 200px;
  height: 300px;
  background-size: 200px 200px;
  background-repeat: no-repeat;
  background-image: linear-gradient(to right,blue 0%,red 100%),url('/images/kurs-style-css/yin-yang.jpg');
  background-blend-mode: normal;
}

Przykłady właściwości background-blend-mode

background-blend-mode: lighten;

background-blend-mode: multiply;

background-blend-mode: screen;

background-blend-mode: overlay;

background-blend-mode: darken;

background-blend-mode: color-dodge;