如何使灰度和过渡效果在firefox和ie中工作？答案

【问题标题】：How to make grayscale and transition effect working in firefox and ie?如何使灰度和过渡效果在firefox和ie中工作？
【发布时间】：2014-04-04 00:29:50
【问题描述】：

为了在 IE 10 和 IE 11 中进行灰度工作，我可以做我在这个问题中找到的方法：internet explorer 10 - howto apply grayscale filter?，但这是针对单个图像的。我需要对所有图像都这样做。我怎么能这样做？

//.bc contain all the images
.bc {
    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(.9); /* Google Chrome, Safari 6+ & Opera 15+ */

    filter: grayscale(90%);

    transition : filter 500ms linear;
    -webkit-transition: -webkit-filter 500ms linear;
    -moz-transition: -moz-filter 500ms linear;
}

那么，我怎样才能让它在多个图像上工作？以及如何使过渡效果起作用（在 Firefox 中仍然不起作用）？

【问题讨论】：

请注意，对于 mozilla 浏览器，只有过渡效果不起作用。

标签： css

【解决方案1】：

你应该使用-moz-filter:

.bc {
    filter: grayscale(90%);
    -moz-filter: grayscale(90%);
    -webkit-filter: grayscale(90%);
}

【讨论】：

不。对于 mozilla，它适用于 svg，但 moz 的问题只是过渡效果。
moz-filter 没有做任何有趣的事情。这是如何获得 +1 的？

【解决方案2】：

您可以使用 Lea Verou 的 Prefixfree 查找 here

.bc {
        filter: grayscale(90%);
    }

或使用标准

  .bc {
        -webkit-filter: grayscale(90%);
        -moz-filter: grayscale(90%);
        -ms-filter: grayscale(90%);
        filter: grayscale(90%);
    }

【讨论】：