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)，而不是灰色。这可能吗？

- DextrousDave

---

你最后添加的 filter: gray; 样式规则会抵消之前的两个样式规则。 - j08691

这个“黑”到底有多“黑”？ - BoltClock

黑色，例如 #000、rgb(0, 0, 0)...你如何定义黑色？ - DextrousDave

Answer 1

尝试使用：

filter: brightness(0%);

- Reinier Koops

Answer 2

我猜你只想要黑白图像，像矢量图之类的东西，对吗？你可以尝试使用饱和度、亮度和对比度滤镜进行调整：

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

在 jsfiddle 中查看示例（仅适用于 Webkit 浏览器，我太懒了，不想写所有的供应商扩展 :P）

- Arkana

---

为什么这个调整不起作用？它在我的电脑上可以运行，但只能在Webkit浏览器（Chrome18+，Webkit nightly，Safari 6+等）中运行。正如您在此处所看到的，其他浏览器不支持滤镜。如果您想要一个跨浏览器的纯CSS解决方案，我认为这是不可能的... - Arkana

是的，我有最新版本的Chrome：24.0.1312.57 m...只是奇怪的是，这些滤镜没有提供设置灰色程度或者纯黑的选项。 - DextrousDave

很奇怪。我有Chrome 26，它完美地运行... 截图 - Arkana

这个在 Webkit（Chrome）上对我有效：-webkit-filter: saturate(0%) brightness(0%) contrast(100%); - jave.web

当选中复选框时，我想要一个黑色背景。这对我来说完美地解决了问题。谢谢 :) - FYP

Answer 3

我来晚了，但是这是目前我找到的最佳解决方案:

filter: brightness(0) invert(1);

- vector-e

Answer 4

我看到这是一个旧问题，但您是否可以将黑色的背景颜色应用于父元素，并使用opacity来淡化子img？

- dylanjameswagner

Answer 5

写这个的专业人士：

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

说要将它变成黑色，请执行以下操作：

brightness(0) saturate(100%)

- danday74

Answer 6

您需要的滤镜数值取决于您网站的内容（图像、背景颜色等）。对于我的网站，filter: grayscale(100%) brightness(70%) contrast(2);有效。只需尝试不同的数值，直到您获得喜欢的效果即可。

- AvailableName

Answer 7

我建议使用饱和度滤镜而不是灰度来获得黑色。这里有一个链接指向David Walshe的网站，你可以尝试调整设置...

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

- Stevo Perisic