應用CSS灰度屬性的圖像

Question

我使用3.3.1

<div class="col-lg-4 listing-box"> 
     <img class="img-circle" src="img/abc.png" style="width: 140px; height: 140px;"></img> 
     <h2>Creative Designer</h2> 
     <p>"The Contemplative" - Creative Designer</p> 
     <p><a class="btn btn-danger" role="button">View details »</a></p> 
</div> 

我使用的所有圖像的灰度效果Twitter的引導，我想使每個盤旋圖像時顏色出現，所以我現在用下面的自定義CSS屬性與「圖像圈」級的引導提供：

.img-circle { 
filter: grayscale(100%); 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
filter: grayscale(50%); 
} 

.listing-box:hover .img-circle { 
filter: none; 
-webkit-filter: grayscale(0%); 
-moz-filter: grayscale(0%); 
-ms-filter: grayscale(0%); 
-o-filter: grayscale(0%); 
} 

的代碼工作正常，在Chrome，但其不工作的Firefox和IE 10，雖然我已經加入WebKit的過濾器和-moz-過濾器。

我錯過了什麼？

Answer 1

Firefox不支持filter，直到2015年1月發佈的v35。IE擁有自己的專有過濾器。