27

我正在使用以下 css 将我的彩色图像转换为灰度。

img.desaturate{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(desaturate.svg#greyscale);
    filter: gray;
    -webkit-filter: grayscale(1);
}

但我想要黑色（rgb（0,0,0）或#000000），而不是灰色。可能吗？

4

7 回答 7

47

尝试使用：

filter: brightness(0%);
于 2016-07-08T11:43:29.303 回答
10

我想您只想要黑白图像，例如矢量图像或其他东西，就这样吗？您可以尝试使用饱和亮度和对比度滤镜：

filter: gray saturate(0%) brightness(70%) contrast(1000%);

jsfiddle 中的 演示（演示仅适用于 Webkit，我懒得写所有供应商扩展：P）

于 2013-04-09T14:23:07.253 回答
3

我迟到了，但这是迄今为止我找到的最佳解决方案：

filter: brightness(0) invert(1);
于 2019-12-05T13:34:08.760 回答
2

我看到这是一个老问题，但是您不能将背景颜色应用于黑色的父元素并用于opacity淡化子元素img吗？

于 2014-02-26T16:48:04.197 回答
1

写这个的专业人士：

https://codepen.io/sosuke/pen/Pjoqqp

说把它变黑这样做：

brightness(0) saturate(100%)
于 2021-05-20T07:20:31.120 回答
0

您需要的过滤器值取决于您网站的内容（图像、背景颜色等）。对于我的网站filter: grayscale(100%) brightness(70%) contrast(2);作品。
只是玩这些价值观，直到你得到你喜欢的东西。

于 2018-04-30T12:56:33.970 回答
-1

我会尝试使用饱和滤镜而不是灰度来获得黑色。这是 david Walshe 网站上的链接，您可以使用这些设置进行操作...

http://davidwalsh.name/demo/css-filters.php

于 2013-04-09T14:19:56.753 回答