Monotónování obrázku pomocí CSS - Triky CSS

Anonim

Na prvek můžete vždy použít filtr, aby byl monotónní ve smyslu stupňů šedi:

Podívejte se na monotónní pero - obrázek Chrisa Coyiera (@chriscoyier) na CodePen.

Pokud to vložíte do kontejneru s barvou pozadí a snížíte krytí, můžete získat barevný monotónní efekt:

Podívejte se na monotónní pero - obrázek Chrisa Coyiera (@chriscoyier) na CodePen.

Maarten van der Velde napsal, že spíše než snižovat neprůhlednost, můžeme to kombinovat s mix-blend-modevyfukováním kontrastu:

Podívejte se na monotónní pero - obrázek Chrisa Coyiera (@chriscoyier) na CodePen.

K tomu Amelia Bellamy-Royds také použila barevné filtry SVG, které mají úžasnou kontrolu:

Podívejte se na Pero SVG Filtry Šedá -> Invertovat černobílou barvu od Amelia Bellamy-Royds (@AmeliaBR) na CodePen.