应用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拥有自己的专有过滤器。