圖像灰度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%);
}