Internet Explorer 10 和 11 中的灰度 CSS 背景？答案

【问题标题】：Grayscale CSS Background in internet explorer 10 and 11?Internet Explorer 10 和 11 中的灰度 CSS 背景？
【发布时间】：2014-06-01 18:11:43
【问题描述】：

灰度在除 ie10 和 ie11 之外的所有浏览器上都能正常工作。我什至尝试过this。它适用于嵌入在 HTML 代码中的图像，但不能用作 CSS 中声明的背景图像。

我什至尝试过：

 img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

这也不起作用。

我用来灰度化背景图像的 CSS 代码：

#callouts{
min-height: 219px;
margin: 33px 0px 0px 0px;
padding-left: 40px;

background: url("/static/images/images/gs-pricing-4panel.png") no-repeat;

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"); 

filter: gray;

-webkit-filter: grayscale(1);
}

【问题讨论】：

stackoverflow.com/questions/14813142/…

标签： html css svg internet-explorer-10 internet-explorer-11

【解决方案1】：

我在需要渐变的任何时候都使用过这个工具：

http://www.colorzilla.com/gradient-editor/

【讨论】：

我也尝试过，但我只想对背景图像进行灰度化。我不想使用线性渐变

【解决方案2】：

IE 还不支持 CSS 过滤器属性，无论是作为内置过滤器函数还是作为引用 SVG 过滤器的 url。获得滤镜效果的唯一方法是为您的图像使用内联 SVG，并对其应用 SVG 滤镜。

此外，IE 不喜欢以纯文本形式表示的 data:URI，它们需要完全 URL 编码或 base-64 编码。但在这种情况下不会有什么不同。

【讨论】：

【解决方案3】：

我是https://github.com/karlhorky/gray 的jQuery 插件的创建者。支持背景图像。带有背景图像的元素需要 grayscale 类。 Example here.

<div class="grayscale" id="callouts"></div>

或：如果您不想使用 grayscale 类名，您可以使用 JavaScript 在您的元素上手动调用 jQuery 插件。 Example.

$('#callouts').gray();

【讨论】：

【解决方案4】：

尝试 JS 修复

它使用 javascript 来检测浏览器并创建一个画布，然后使用过滤器

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/

【讨论】：