Bộ lọc CSS màu xám không hoạt động trong Firefox

Question

Tôi đang gặp sự cố khi chuyển đổi từ màu xám sang màu, nó hoạt động trong chrome, nhưng chính là nó.

Dưới đây là 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> 

Đây là 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%); 
} 

Cảm ơn sự giúp đỡ nào, nó đánh giá cao.

Answer 1

Hãy thử thiết #post: hover này:

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

Bạn có thể nhìn nó lên đây. http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/

trong trường hợp liên kết hướng dẫn sẽ chết công trình: 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"); 
} 

Theo ghi nhận của Adam dưới đây: Từ Firefox 35 bộ lọc: thang độ xám (100%); nên làm việc.

Answer 2

Từ Firefox 35 filter: grayscale(100%); sẽ hoạt động.

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