Монотонування зображення за допомогою CSS - CSS-хитрощі

Anonim

Ви завжди можете застосувати фільтр до елемента, щоб зробити його монотонним у сенсі сірого:

Дивіться монотонну ручку зображення Кріса Койєра (@chriscoyier) на CodePen.

Якщо покласти це в контейнер із фоновим кольором і зменшити непрозорість, можна отримати кольоровий монотонний ефект:

Дивіться монотонну ручку зображення Кріса Койєра (@chriscoyier) на CodePen.

Маартен ван дер Вельде писав, кажучи, що замість того, щоб зменшувати непрозорість, ми можемо поєднувати її mix-blend-modeта задувати контраст:

Дивіться монотонну ручку зображення Кріса Койєра (@chriscoyier) на CodePen.

Амелія Белламі-Ройдс також використовувала для цього кольорові фільтри SVG, що має надзвичайний контроль:

Див. Фільтри Pen SVG Grey -> Invert Monochrome Color від Amelia Bellamy-Royds (@AmeliaBR) на CodePen.