我正在使用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属性&#34; image-circle&#34; class由bootstrap提供:
.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。
我错过了什么?
答案 0 :(得分:1)
Firefox不支持filter
,直到2015年1月发布的v35.IE拥有自己的专有过滤器。