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" />