Question

除了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);
}

Answer 1

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

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

Answer 2

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

此外，IE不喜欢数据：以纯文本表示的URI，它们需要完全URL编码或base-64编码。但在这种情况下它不会有所作为。

Answer 3

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

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

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

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

Answer 4

尝试JS修复

使用javascript检测浏览器并创建画布然后使用过滤器

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

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

4 个答案: