La scala di grigi del filtro CSS non funziona in Firefox

Question

Ho problemi nel passaggio da scala di grigi a colori, funziona in chrome, ma è così.

Ecco il codice 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> 

Ecco il 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%); 
} 

Grazie per qualsiasi aiuto, è apprezzato.

Answer 1

provare a impostare #post: hover a questo:

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"); 

si può guardare in su qui. http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/

in caso di collegamento esercitazione sarà morto opere in: Safari 6.1.1, Firefox 26.0, Chrome 32.0.1700.77

.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"); 
} 

Come osservato da Adam di seguito: Da Firefox 35 Filtro: scala di grigi (100%); dovrebbe funzionare.

Answer 2

Da Firefox 35 filter: grayscale(100%); dovrebbe funzionare.

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