作为this我正在使用这个
img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: gray;/*ie fallback*/
filter: grayscale(100%);
}
它适用于 chrome。但不适用于 Firefox。我使用的是 Firefox 27.1。
最佳答案
首先,我应该注意到 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);
}
关于html - 彩色图像到灰度图像在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22092332/