IE 10的CSS滤镜灰度图像 [英] CSS filter grayscale image for IE 10

问题描述

有没有办法使灰度图像过滤器工作在IE 10没有JavaScript或SVG？

Is there a way to make grayscale image filter work on IE 10 without JavaScript or SVG?

我一直使用下面的代码成功地在所有浏览器10.

I've been using the following code successfully in all browsers except IE 10.

img{
filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter     id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /*     Firefox 10+, Firefox on Android */
filter:gray; /* IE6-9 */
-webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);}

推荐答案

此方法仅适用于WebKit和Firefox。它不工作在IE或Opera。 WebKit是目前唯一支持CSS过滤器的浏览器，而Firefox支持HTML上的SVG过滤器。 Opera和IE支持SVG过滤器，但只支持SVG内容。

This approach only works in WebKit and Firefox. It doesn’t work in IE or Opera. WebKit is currently the only browser to support CSS filters, while Firefox supports SVG filters on HTML. Opera and IE support SVG filters, but only for SVG content.

在IE10中没有很好的方法使它工作，因为它丢弃了对旧的IE过滤器的支持。

There is no good way to make this work in IE10, as it dropped support for the legacy IE filters. There is a way, however, I’d not recommend it.

您可以使用IE9标准模式使用头部中的以下元素元素来设置IE10：

You can set IE10 to render using IE9 standards mode using the following meta element in the head:

<meta http-equiv="X-UA-Compatible" content="IE=9">

这将恢复旧版IE过滤器的支持。然而，它具有将IE丢弃到IE9模式的副作用，其中将不再支持IE10中的最新进展。在你的情况下，可能是你目前不需要这些新功能，但如果你走这条路，你需要知道它在未来更新网站时。

This will turn support back on for legacy IE filters. However, it has the side effect of dropping IE into IE9 mode, where the latest advancements in IE10 will no longer be supported. In your case it may be possible that you do not need these new features currently, but if you go down this road, you’d need to be aware of it when updating the site in future.

这篇关于IE 10的CSS滤镜灰度图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！