css - 在 Safari 5.x 上使用 CSS 的灰度图像

标签 css safari grayscale

我正在尝试在页面上显示一些图像,这些图像应该以灰度显示,除非在鼠标悬停时平滑过渡为彩色。我已经让它在 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 */
}

哦,别忘了 dowebsitesneedtolookexactlythesameineverybrowser?

关于css - 在 Safari 5.x 上使用 CSS 的灰度图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12685794/

相关文章:

javascript - 使用 iOS 8 "Scan credit card"功能时,输入字段会触发什么 JS 事件?

css - SVG stroke-dashoffset 不适用于 safari

c++ - 将 QImage 转换为灰度

javascript - 与 Logo 图像位于同一顶部导航栏上的汉堡包菜单

css - 为什么在 Chrome 和 Safari 中所有链接都是红色的?

html - 如何确保 2 行元素完全对齐?

c - 如何使用 IPP 将 8 位灰度图像转换为 NV12(有限范围)颜色空间

matlab - 如何在 MATLAB 中的同一个图中同时显示 RGB 和灰度图像

css - 自定义 Ng-Bootstrap Carousel,显示图像和描述字段

iphone - 在 UIWebview 中呈现希伯来文本的问题