CSS filtre en niveaux de gris ne fonctionne pas sous Firefox
Je vais avoir des ennuis à faire une transition à partir de niveaux de gris colorés, il fonctionne dans chrome, mais c'est elle.
Voici le code 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>
Voici le 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%);
}
Merci pour toute aide, c'est apprécié.
Vous devez vous connecter pour publier un commentaire.
Essayez de définir #post:hover pour cela:
Vous pouvez le regarder ici. http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/
en cas tutoriel lien sera mort
travaille: Safari 6.1.1, Firefox 26.0, Chrome 32.0.1700.77
Comme indiqué par Adam ci-dessous:
À partir de Firefox 35 filter: grayscale(100%); devrait fonctionner.
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");
pour 100% de gris, et inversement -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"); }
de 0% en niveaux de grisgrayscale
à filtrer à travers, par conséquent, de déclarer explicitement résout le problème.mix-blend-mode: multiply;
siÀ partir de Firefox 35
filter: grayscale(100%);
devrait fonctionner.Voir: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility
mix-blend-mode: multiply;
.Merci. Pas un correctif pour les anciennes versions, mais que FF mise à jour par lui-même ...