CSS 过滤器灰度:我想要黑色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15904211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:22:50  来源:igfitidea点击:

CSS Filter grayscale: I want it Black

css

提问by DextrousDave

I am using the following css to convert my color images to grayscale.

我正在使用以下 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);
}

BUT I want it Black(rgb(0,0,0) or #000000), and not grey. Is it possible?

但我想要黑色(rgb(0,0,0)或#000000),而不是灰色。是否可以?

回答by Reinier Koops

Try using:

尝试使用:

filter: brightness(0%);

回答by Arkana

I supose you want only black & white images, like a vector image or something, that's it? You could try playing with the saturate brightness and contrast filters:

我想你只想要黑白图像,比如矢量图像之类的,就这样吗?您可以尝试使用饱和亮度和对比度过滤器:

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

Demo in jsfiddle(Demo only works in Webkit, I'm too lazy to write all vendor extensions :P)

jsfiddle 中的演示(演示仅适用于 Webkit,我懒得写所有供应商扩展:P)

回答by dylanjameswagner

I see that this is old question, but couldn't you apply a background-color to the parent element that is black and use opacityto fade the child img?

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

回答by AvailableName

The filter values that you need depend on the content of your website (images, background colors, etc'). For my site filter: grayscale(100%) brightness(70%) contrast(2);works.
Just play with the values until you get something you like.

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

回答by vector-e

I'm late to the party, but here's the best solution I found so far:

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

filter: brightness(0) invert(1);

回答by Stevo Perisic

I would try using the saturate filter rather than grayscale to get the black color. Here's a link on david Walshe's site you can play with the settings...

我会尝试使用饱和过滤器而不是灰度来获得黑色。这是 david Walshe 网站上的一个链接,您可以使用这些设置...

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

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