图像灰度CSS效果

Question

我想使用CSS降低图像的brightness 。

我正在使用Mozilla Firefox，这是我的代码：

-moz-filter: brightness(0.5);
filter: brightness(0.5);

为什么没有生效？

Answer 1

img {
  -webkit-filter: brightness(100%);
  -moz-filter: brightness(100%);
  filter: brightness(100%);
}
img:hover {
  -webkit-filter: brightness(50%);
  -moz-filter: brightness(50%);
  filter: brightness(50%);
}

这就是您所需要的！ 我在Firefox和Chrome中签入，代码正在运行
jsfiddle-link

Answer 2

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    -moz-filter: brightness(100%);
    filter: grayscale(100%);
}

img:hover {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    -moz-filter: brightness(50%);
    filter: grayscale(50%);
}