将 CSS 灰度属性应用于图像

Question

我正在使用 twitter bootstrap 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>

我正在对所有图像使用灰度效果，并且我希望在悬停每个图像时显示颜色，因此我使用以下自定义 CSS 属性和 bootstrap 提供的“image-circle”类：

.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-filter 和 -moz-filter。

我错过了什么？

Answer 1

Firefox 在 v35 之前不支持 filter，该版本将于 2015 年 1 月发布。IE 有自己的专有过滤器。