彩色图像到灰度图像不能在Firefox中工作

时间:2014-02-28 10:22:16

标签: html css firefox

作为this我正在使用此

img{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: gray;/*ie fallback*/
    filter: grayscale(100%);
}

它适用于chrome。但是没有在firefox中工作。我正在使用Firefox 27.1。

demo

1 个答案:

答案 0 :(得分:2)

首先,我应该注意到CSS filter是一种实验性技术,它只在Webkit中实现,并且没有浏览器兼容性。

但是,对于Firefox 3.5+,您可以使用SVG filterData URI作为SVG。

由于我们必须定位filter元素(在这种情况下为#grayscale),我们不应该encode the SVG as base64

因此,我们可以将空格字符编码为%20以使数据URI起作用:

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

你走了:

img {
    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(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

img:hover {  /* Remove the filter on hover. remove this if it is not needed */
    filter: none;
    -webkit-filter: grayscale(0);
}