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

Question

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

Я пытаюсь преобразовать логотипы в черно-белые, без каких-либо оттенков серого и дошел до этого, но не могу избавиться от эффектов градиента. Я хотел бы сделать его чисто черно-белым (где 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" />

1

html css css3

Источник

user605511 22 окт '18 в 19:59

1 ответ

Решение

Другие вопросы по тегам html css css3

user7372897 22 окт '18 в 20:02 2018-10-22 20:02 · Accepted Answer · 2018-10-22 20:02

Ты можешь использовать 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" />