Монотониране на изображение с CSS - CSS-трикове

Anonim

Винаги можете да приложите филтър към елемент, за да го направите монотонен в смисъла на сивата скала:

Вижте монотонното писане на изображение от Крис Койер (@chriscoyier) на CodePen.

Ако поставите това в контейнер с цвят на фона и намалите непрозрачността, можете да получите цветен монотонен ефект:

Вижте монотонното писане на изображение от Крис Койер (@chriscoyier) на CodePen.

Маартен ван дер Велде пише, че вместо да намаляваме непрозрачността, можем да я комбинираме mix-blend-modeи да издухаме контраста:

Вижте монотонното писане на изображение от Крис Койер (@chriscoyier) на CodePen.

Amelia Bellamy-Royds също покри с помощта на SVG цветни филтри, за да направи това, което има невероятен контрол:

Вижте Pen SVG Filters Grey -> Invert Monochrome Color от Amelia Bellamy-Royds (@AmeliaBR) на CodePen.