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

我想你只想要黑＆amp;白色图像，像矢量图像或其他东西，就是这样吗？您可以尝试使用饱和亮度和对比度滤镜进行播放：

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

Demo in jsfiddle （Demo仅适用于Webkit，我懒得编写所有供应商扩展：P）

Answer 3

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

Answer 4

我会尝试使用饱和滤镜而不是灰度来获得黑色。这是大卫沃尔什网站上的链接，您可以使用设置...

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

Answer 5

您需要的过滤器值取决于您网站的内容（图片，背景颜色等）。对于我的网站filter: grayscale(100%) brightness(70%) contrast(2);有效。
只需使用这些值，直到得到你喜欢的东西。

Answer 6

我参加聚会很晚，但这是我到目前为止找到的最佳解决方案：

filter: brightness(0) invert(1);

Answer 7

写这篇文章的专业人士：

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

说要把它变成黑色，这样做：

brightness(0) saturate(100%)

CSS滤镜灰度：我想要它黑色

7 个答案: