首先,我要指出,CSS filter
是一种实验技术,这是只有在Webkit的实现,它不具备浏览器的兼容性。
但是,对于Firefox 3.5及更高版本,您可以使用SVG filter和Data 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);
}
'为了获得在Firefox 4+相同的效果,我们需要使用SVG过滤器 - 您需要添加SVG过滤器 - filter:url(filter.svg#greyscale); - 然后创建'filter.svg' –