Atrybut background-blend-mode w CSS

Definicja i użycie

background-blend-mode Atrybut definiuje tryb mieszania każdej warstwy tła (kolora i/lub obrazu).

Zobacz również:

CSS tutorial:Tło CSS

Przykład

Określ tryb mieszania obrazu tła jako "lighten" (jasny):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

Spróbuj sam

Więcej przykładów TIY można zobaczyć na końcu strony.

Gramatyka CSS

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

Wartość atrybutu

Wartość Opis
normal Domyślnie. Ustaw tryb mieszania na normalny.
multiply Ustaw tryb mieszania na multiply (pomnożenie).
screen Ustaw tryb mieszania na screen (ekran).
overlay Ustaw tryb mieszania na overlay (nadkładanie).
darken Ustaw tryb mieszania na overlay (nadkładanie).
lighten Ustaw tryb mieszania na lighten (jasny).
color-dodge Ustaw tryb mieszania na color-dodge (zmniejszenie koloru).
saturation Ustaw tryb mieszania na saturation (satysfakcja).
color Ustaw tryb mieszania na color (kolor).
luminosity Ustaw tryb mieszania na luminosity (jasność).

Szczegóły techniczne

Domyślna wartość: normal
Inherencja: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Gramatyka JavaScript: object.style.backgroundBlendMode="screen"

Więcej przykładów

Przykład

Ustaw tryb mieszania na "multiply":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

Spróbuj sam

Przykład

Ustaw tryb mieszania na "screen":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

Spróbuj sam

Przykład

Ustaw tryb mieszania na "overlay":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

Spróbuj sam

Przykład

Ustaw tryb mieszania na "darken":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

Spróbuj sam

Przykład

Ustaw tryb mieszania na "color-dodge":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

Spróbuj sam

Przykład

Ustaw tryb mieszania na "saturation":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

Spróbuj sam

Przykład

Ustaw tryb mieszania na "color":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

Spróbuj sam

Przykład

Ustaw tryb mieszania na "luminosity":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

Spróbuj sam

Przykład

Ustaw tryb mieszania na "normal":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

Spróbuj sam

Obsługa przeglądarek

Tabela zawiera numer pierwszej wersji przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1