在Safari 5.x上使用CSS的灰度图像 [英] Grayscale image with CSS on Safari 5.x

问题描述

我想在网页上显示一些图片，应该以灰度显示，除非鼠标悬停时平滑转换为彩色。我已经在IE，Chrome和Firefox上正常工作，但在Safari 5.x上无法正常工作。问题出在Safari for Mac 和 Safari for Windows。这是我到目前为止的代码：

  filter：url（'desaturate.svg＃greyscale'）; 
 filter：grey; 
 -webkit-filter：grayscale（1）; 
 

第一行加载一个外部.svg过滤器（我没有内联它与一个 url（data： ... rule因为我想避免旧版Firefox中的错误）。

第二行是用于IE，似乎工作方式与 filter：progid：DXImageTransform.Microsoft.BasicImage（grayScale = 1）; 。

webkit的最后一行应该工作

是否有任何CSS规则在 Safari 5.x 上显示灰度图片？ ，如果这是不可能的，有人可以推荐一个javascript解决方案，最好是一个将处理动画的灰度图像？我想避免服务器端黑客灰度图像， 。

感谢

修改：

由于这证明是一个值得注意的问题，请不要在这里张贴更多答案只适用于Safari 6及更高版本，或在数据网址中包含.svg文件的答案。在我写OP的时候，重要的是我支持某些版本的Safari和Firefox今天被认为非常过期，但尽管如此，这是我原来的问题。

我很清楚，对于现代浏览器，灰度过滤很容易用几行CSS代码实现，但是图形设计器使用Safari 5.x和客户端在我做这个项目时使用Firefox 3.x。为我工作的解决方案是Giona建议的，即使用Modernizr测试css过滤，如果它不支持回到javascript。

<

解决方案如果我今天做同样的事情， div>

正如您可以在 caniuse.com 上看到的，CSS3过滤器目前仅支持少数几个浏览器。

如果Google有许多JavaScript / jQuery后备广告javascript grayscale plugin 。
以下是一些：

• Grayscale.js


• jQuery GreyScale插件
• 
  
• Hoverizr


• 使用canvas（教程）

但我没有经验，所以我不能建议你哪一个是最好的。

我试过< a href =https://github.com/GianlucaGuarini/jQuery.BlackAnd White> jQuery Black and White 很久以前，它给了我很多关于相对/绝对定位图像的问题，所以也许避免它

---

包含 Modernizr build 到您的网页中，您可以通过Javascript定位不支持过滤器的浏览器：

  if （！Modernizr.css_filters）{
 / * javascript fallback here * / 
} 
  

或CSS：

  .no-css_filters .element {
 / * css fallback here * / 
} 
  

---

a href =http://dowebsitesneedtolookexactlythesameineverybrowser.com/> dowebsitesneedtolookexactlythesameineverybrowser？

I am trying to show some images on a page where they should be shown in grayscale, except on mouse hover when they smoothly transition into color. I've made it work nicely on IE, Chrome and Firefox, but it doesn't work on Safari 5.x. The problem is on Safari for Mac and Safari for Windows. Here is the code I have so far:

filter: url('desaturate.svg#greyscale'); 
filter: gray;
-webkit-filter: grayscale(1);

The first line loads an external .svg filter (I don't inline it with a url("data:... rule because I want to avoid a bug in old versions of Firefox).

The second line is for IE and seems to work just as well as filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);.

The last line about webkit is supposed to work on Safari 6 and above, as well as Chrome.

Is there any CSS rule to show the images with grayscale on Safari 5.x? Or, if that is not possible, can someone recommend a javascript solution, preferably one that will handle the animation to and from grayscale? I would like to avoid a server-side hack with grayscale images because that will mess up my HTML and then I'll have to do some nasty browser detection to serve HTML conditionally.

thanks

Edit:

As this has turned out to be a "notable question", please don't keep posting here more answers that only work on Safari 6 and above, or answers that include an .svg file in a data url. At the time when I wrote the OP, it was important for me to support some versions of Safari and Firefox that are today considered very dated, but nevertheless that was my original question.

I am well aware that for modern browsers grayscale filtering is easily accomplished with a few lines of CSS code, but the graphics designer was using Safari 5.x and the client was using Firefox 3.x at the time I did this project. The solution that worked for me was what Giona suggested, i.e. to use Modernizr to test for css-filtering, and if it's not supported to fall back to javascript.

If I was doing the same thing today, I'd be telling both to go update their browsers!

解决方案

As you can see on caniuse.com , CSS3 filters are supported by very few browsers at the moment.

There are many JavaScript/jQuery fallback if you Google "javascript grayscale plugin". Here are some:

• Grayscale.js
• jQuery GreyScale plugin
• Hoverizr
• Do it with canvas (tutorial)

But i've no experience with them, so i can't suggest you which one is the best.

I tried jQuery Black And White long time ago, and it gave me a lot of issues with relative/absolute positioned images, so maybe avoid it.

---

Including this Modernizr build into your pages, you can target browser not supporting filters via Javascript:

if(!Modernizr.css_filters){
    /* javascript fallback here */
}

or CSS:

.no-css_filters .element {
    /* css fallback here */
}

---

Oh, and don't forget dowebsitesneedtolookexactlythesameineverybrowser?

这篇关于在Safari 5.x上使用CSS的灰度图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！