[英]Applying CSS grayscale property to images
I am using twitter bootstrap 3.3.1 我正在使用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>
I am using a grayscale effect on all the images, and I want to make the colors appear when hovering each image, so I am using the following Custom CSS properties with "image-circle" class provided by bootstrap : 我在所有图像上都使用了灰度效果,并且希望在将每个图像都悬停时显示颜色,因此我将以下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%);
}
The code is working fine on Chrome but its not working on Firefox and IE 10, although I have added -webkit-filter and -moz-filter. 尽管我添加了-webkit-filter和-moz-filter,但该代码在Chrome上运行正常,但在Firefox和IE 10上却无法运行。
What am I missing? 我想念什么?
Firefox将于2015年1月发布,直到v35才支持filter
。IE具有自己的专有过滤器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.