將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>

我在所有圖像上都使用了灰度效果，並且希望在將每個圖像都懸停時顯示顏色，因此我將以下Custom 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%);
}

盡管我添加了-webkit-filter和-moz-filter，但該代碼在Chrome上運行正常，但在Firefox和IE 10上卻無法運行。

我想念什么？

Answer 1

Firefox將於2015年1月發布，直到v35才支持filter 。IE具有自己的專有過濾器。