我正在尝试在页面上显示一些图像,这些图像应该以灰度显示,除非在鼠标悬停时平滑过渡为彩色。我已经让它在 IE、Chrome 和 Firefox 上运行良好,但它在 Safari 5.x 上不起作用。问题出在适用于 Mac 的 Safari 和 适用于 Windows 的 Safari 上。这是我到目前为止的代码:
filter: url('desaturate.svg#greyscale');
filter: gray;
-webkit-filter: grayscale(1);
第一行加载一个外部 .svg 过滤器(我没有用 url("data:
... 规则内联它,因为我想避免 a bug in old versions of Firefox )。
第二行是针对 IE 的,看起来和 filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
一样好用。
关于 webkit 的最后一行应该适用于 Safari 6 及更高版本,以及 Chrome。
是否有任何 CSS 规则可以在 Safari 5.x 上显示灰度图像?或者,如果那不可能,有人可以推荐一种 javascript 解决方案,最好是能够处理灰度动画的解决方案吗?
谢谢
编辑:
因为这已经证明是一个“值得注意的问题”,请不要继续在此处发布更多仅适用于 Safari 6 及更高版本的答案,或在数据 URL 中包含 .svg 文件的答案。在我编写 OP 时,支持某些今天被认为非常过时的 Safari 和 Firefox 版本对我来说很重要,但这仍然是我最初的问题。
我很清楚,对于现代浏览器来说,灰度过滤可以通过几行 CSS 代码轻松完成,但图形设计师使用的是 Safari 5.x,而客户端使用的是 Firefox 3.x 在我做这个元素的时候。对我有用的解决方案是 Giona 建议的,即使用 Modernizr 测试 css 过滤,如果不支持则回退到 javascript。
如果我今天做同样的事情,我会告诉他们去更新他们的浏览器!
最佳答案
正如您在 caniuse.com 上看到的那样, 目前只有少数浏览器支持 CSS3 过滤器。
如果你谷歌“javascript grayscale plugin”,有很多 JavaScript/jQuery 回退。 这里有一些:
但我没有使用它们的经验,所以我无法建议您哪一个是最好的。
我试过了 jQuery Black And White很久以前,它给了我很多关于相对/绝对定位图像的问题,所以也许避免它。
包括这个Modernizr build进入您的页面,您可以通过 Javascript 定位不支持过滤器的浏览器:
if(!Modernizr.css_filters){
/* javascript fallback here */
}
或 CSS:
.no-css_filters .element {
/* css fallback here */
}
关于css - 在 Safari 5.x 上使用 CSS 的灰度图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12685794/