问CSS将图像转换为无灰度的黑白图像
EN

Stack Overflow用户

提问于 2018-10-23 03:59:41

回答 1查看 58关注 0票数 1

我正在尝试将标志转换为黑白，没有任何灰色，已经走到了这一步，但无法摆脱渐变效果。我想让它变成纯黑白的( 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" />

回答已采纳

发布于 2018-10-23 04:02:42

您可以使用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" />

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52936926

复制

相似问题

问CSS将图像转换为无灰度的黑白图像EN