सीएसएस फ़िल्टर ग्रेस्केल फ़ायरफ़ॉक्स

Question

में काम नहीं कर रहा है मुझे ग्रेस्केल से रंग में संक्रमण करने में परेशानी हो रही है, यह क्रोम में काम करता है, लेकिन यह है।

यहाँ 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> 

यहाँ सीएसएस है:

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

किसी भी मदद के लिए धन्यवाद, यह सराहना की है।

Answer 1

कोशिश की स्थापना #post: यह करने के लिए मंडराना:

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

आप इसे यहाँ देख सकते हैं। http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/

मामले में ट्यूटोरियल लिंक में मृत काम करता होगा: सफारी 6.1.1, फ़ायरफ़ॉक्स 26.0, क्रोम 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"); 
} 

नीचे एडम द्वारा बताया गया है: फ़ायरफ़ॉक्स 35 फिल्टर से: ग्रेस्केल (100%); कार्य करना चाहिए।

Answer 2

फ़ायरफ़ॉक्स से 35 filter: grayscale(100%); काम करना चाहिए।

देखें: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility