Tryb mieszania tła - CSS-Tricks

Spisie treści

W background-blend-modeobiekcie definiuje wpływ elementu background-imagepowinien zlewać ze swoim background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Zobacz tryb mieszania tła pióra autorstwa CSS-Tricks (@ css-tricks) w CodePen.

W powyższym demo domyślny background-imagepo lewej nie ma ustawionego trybu mieszania, więc obraz nakłada się na background-color. Jednak po prawej stronie tryb mieszania zmodyfikował background-imagez czerwonym background-colorpod spodem. Należy jednak zauważyć, że ta dodatkowa właściwość nie wpływa na kolor tekstu.

Wartości

  • initial: wartość domyślna bez mieszania.
  • inherit: dziedziczy tryb mieszania elementu nadrzędnego.
  • : wartość, która zmieni obraz tła w zależności od jego koloru tła.

Wartości można ustawić jak dowolny z następujących (w demo poniżej na background-colorczerwono)

luminosity: jasność górnego koloru jest zachowywana przy użyciu nasycenia i odcienia koloru tła.

Próbny

Oto roboczy przykład interpretacji tych wartości w zależności od background-color:

Zobacz tryb mieszania tła pióra autorstwa CSS-Tricks (@ css-tricks) w CodePen.

Łączenie wielu trybów mieszania

Każda warstwa tła może mieć tylko jeden tryb mieszania, jednak jeśli używamy na przykład wielu liniowych gradientów, każdy z nich może mieć swój własny tryb mieszania, co zapewnia interesujący obraz:

Zobacz Gradienty pióra i tryb mieszania tła autorstwa CSS-Tricks (@ css-tricks) w CodePen.

Można to osiągnąć, wymieniając te wartości w kolejności warstwy tła, którą chcesz zastosować:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

Pierwszy gradient liniowy ma screentryb mieszania, po którym następuje drugi gradient liniowy, który ma, differencei pierwszy obraz tła, który został lightendo niego zastosowany.

Więcej informacji

  • Podstawy trybów mieszania CSS
  • tryb mieszania tła na MDN
  • Komponowanie i miksowanie na W3C
  • background-blend-mode na webplatform.org
  • Zbiór demonstracji trybu mieszania CSS
  • Poznajemy tryby mieszania CSS

Wsparcie przeglądarki

Chrom Safari Firefox Opera TO ZNACZY Android iOS
35+ 7.1 35+ 27+ nie 37+ 8.1+

Interesujące artykuły...