CSS, чтобы превратить изображение в черно-белое без серого

Question

Я пытаюсь преобразовать логотипы в черно-белые, без каких-либо оттенков серого, и зашел так далеко, но не могу избавиться от эффектов градиента.Я хотел бы сделать его чисто черно-белым (где mix-blend-mode: multiply в конечном итоге избавляется от белого фона):

.logo {
   width: 100px;
   height: 100px;
   filter: grayscale(1) contrast(1.5) brightness(1);
   mix-blend-mode: multiply;
}

<img src="https://d2slcw3kip6qmk.cloudfront.net/marketing/blogs/press/8-tips-designing-logos-that-dont-suck/instagram-logo.png" class="logo" />

Answer 1

Вы можете использовать contrast(100), чтобы сделать его полностью черно-белым.Вы всегда можете немного уменьшить его и использовать более низкую настройку, например contrast(10).

.logo {
   width: 100px;
   height: 100px;
   filter: grayscale(1) contrast(100) brightness(1);
   mix-blend-mode: multiply;
}

<img src="https://d2slcw3kip6qmk.cloudfront.net/marketing/blogs/press/8-tips-designing-logos-that-dont-suck/instagram-logo.png" class="logo" />

Или, как указал @vals, вы можете использовать немного другой filter для удаления любых градиентных помех.

.logo {
   width: 100px;
   height: 100px;
   filter: saturate(150) grayscale(1) contrast(10);
   mix-blend-mode: multiply;
}

<img src="https://d2slcw3kip6qmk.cloudfront.net/marketing/blogs/press/8-tips-designing-logos-that-dont-suck/instagram-logo.png" class="logo" />