CSS filtr skali szarości nie działa w Firefoksie

Question

Mam kłopoty robi przejście od szarości do kolorowych, to działa w Chrome, ale to jest to.

Oto HTML:

<div id="post" style="background-image:url('bg.png');background-repeat:no-repeat;"> 
    <p><a href="/post.php?id=1">Title - Date</a></p> 
</div> 

Oto CSS:

#post{ 
    padding:0; 
    margin:0 auto; 
    margin-bottom:25px; 
    border:solid 1px #000; 
    height:150px; 
    width:750px; 
    display:block; 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); 
    filter: gray alpha(opacity=50); 
    -webkit-filter: grayscale(50%); 
    -webkit-transition: 0.3s all ease; 
    -o-transition: 0.3s all ease; 
    -moz-transition: 0.3s all ease; 
    transition: 0.3s all ease; 
    -webkit-backface-visibility: hidden; 
} 

#post:hover{ 
    filter: none; 
    -webkit-filter: grayscale(0%); 
} 

Dzięki za wszelką pomoc, to mile widziane.

Answer 1

spróbuj ustawić #post: hover do tego:

filter:grayscale(0%); 
    -webkit-filter: grayscale(0%); 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 

Można to sprawdzić tutaj. http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/

w przypadku łącza samouczek będzie martwy prace w: Safari 6.1.1, Firefox, Chrome 32.0.1700.77 26,0

.slides li img{ 
    filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); /* For Webkit browsers */ 
    filter: gray; /* For IE 6 - 9 */ 
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ 
    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+, Firefox on Android */ 
} 
.slides li img:hover{ 
    filter: grayscale(0%); 
    -webkit-filter: grayscale(0%); 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 
} 

Jak zauważył Adam poniżej: z Firefoksa 35 filtra: skala szarości (100%); powinno działać.

Answer 2

Od Firefox 35 filter: grayscale(100%); powinno działać.

Patrz: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility