Režim míchání na pozadí - Triky CSS

Anonim

K background-blend-modevlastnictví definuje, jak nějaký prvek se background-imageměla splynout s background-color:

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

Podívejte se na režim pera na pozadí od CSS-Tricks (@ css-tricks) na CodePen.

V ukázce výše nemá výchozí background-imagenalevo nastaven žádný režim prolnutí, takže obrázek překrývá background-color. Na pravé straně však režim míchání upravil background-images červenou background-colorspodní částí . Všimněte si však, že barva textu nebyla touto dodatečnou vlastností ovlivněna.

Hodnoty

  • initial: výchozí hodnota bez míchání.
  • inherit: zdědí režim prolnutí nadřazeného prvku.
  • : hodnota, která změní obrázek pozadí v závislosti na jeho barvě pozadí.

Hodnota může být nastavena jako některý z následujících (v níže uvedených demonstrací background-colorje červený):

luminosity: svítivost horní barvy je zachována při použití sytosti a odstínu barvy pozadí.

Ukázka

Zde je funkční příklad toho, jak jsou tyto hodnoty interpretovány v závislosti na background-color:

Podívejte se na režim míchání pozadí pera pomocí CSS-Tricks (@ css-tricks) na CodePen.

Řetězení více režimů míchání

Každá vrstva pozadí může mít pouze jeden režim prolnutí, ale pokud například používáme více lineárních přechodů, každá z nich může mít svůj vlastní režim prolnutí, který umožňuje zajímavé zobrazení:

Podívejte se na přechody pera a režim míchání na pozadí od CSS-Tricks (@ css-tricks) na CodePen.

Toho je dosaženo uvedením těchto hodnot v pořadí podle vrstvy pozadí, kterou chcete provést:

.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; )

První lineární přechod má screenrežim prolnutí, následovaný druhým lineárním přechodem, který má, differencea prvním obrázkem pozadí, který byl lightenna něj aplikován.

Více informací

  • Základy režimů míchání CSS
  • režim míchání na pozadí na MDN
  • Složení a míchání na W3C
  • režim míchání na pozadí na webplatform.org
  • Sbírka ukázek režimu míchání CSS
  • Seznámení s režimy míchání CSS

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
35+ 7.1 35+ 27+ ani náhodou 37+ 8,1+