Mozilla灰度永久过滤器不起作用/跨浏览器

时间:2014-09-02 08:55:07

标签: css hover transition grayscale permanent

我想知道为什么所有其他浏览器都使用我的TUMBLR自定义主题,而Mozilla似乎也有自己的方式:

#post img {
width:500px;
margin-left: -43px;
opacity:0.75;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */     
filter: gray; /* IE6-9 */
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%); 
transition: all 0s 99999s;
-moz-transition: all 0s 99999s; 
-webkit-transition: all 0s 99999s;
}

#post img:hover {
opacity:1;
filter: none !important;
/* transition on mouseover */
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out; 
}

基本上意图是将悬停置于永久状态,所有图片变灰然后重新着色并保持永久状态。该代码包括转换到图像的正常状态的延迟。

你能告诉我这个问题吗? 非常感谢!彼得。

0 个答案:

没有答案