时间戳

首页 > 解决方案 > 过滤灰度在 Internet Explorer 中不起作用

html - 过滤灰度在 Internet Explorer 中不起作用

问题描述

其他人可以帮我解决灰度过滤器不适用于 Internet Explorer 的任何解决方案吗？任何其他解决方案？谢谢

.blog-image img {
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -ms-transition: 0.3s ease-in-out; 
}
.blog-image img:hover {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
}
<div class="blog-image">
  <img src="http://placekitten.com/1000/500" />
</div>

标签： htmlcss

解决方案

你可以使用这样的灰度叠加...

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

推荐阅读