CSS滤镜灰度:我想要黑色

Question

我使用下面的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)，而不是灰色。这可能吗?

Answer 1

尝试使用:

filter: brightness(0%);

Answer 2

我想你只需要黑色&白色图像，像矢量图像之类的，就这样吗?你可以试试饱和度和对比度滤镜:

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

在jsfiddle中演示(Demo只适用于Webkit，我懒得写所有供应商扩展:P)

Answer 3

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

filter: brightness(0) invert(1);

Answer 4

我知道这是一个老问题，但是你不能为父元素应用一个黑色的背景色，并使用opacity来淡化子元素img吗?

Answer 5

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

Answer 6

作者:

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

表示要把它变成黑色，这样做:

brightness(0) saturate(100%)

Answer 7

我会尝试使用饱和滤镜而不是灰度来获得黑色。这是david Walshe网站上的一个链接，你可以玩设置…

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