我已经阅读了一段时间的灰度图像支持。我在template.css中找到了使用CSS代码的解决方案:
.partner {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
.partner:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
对于我正在使用的图像本身:
<img class="partner" src="/joom/images/partners/image.png" alt="image logo" height="30" width="105">
然而,这不适用于IE9和IE10的下一版本,11 ...我知道我应该使用SVG来使其在IE10上运行。所以我需要同时使用CSS和JS。我需要使用哪些文件和代码来获取图像的SVG灰度支持? 谢谢!
答案 0 :(得分:0)
对于IE10 / 11,您必须通过SVG <image>
元素显示图像,而不是html <img>
元素。只有SVG元素可以在IE中使用过滤器。即。
<svg height="30" width="105">
<image class="partner" xlink:href="/joom/images/partners/image.png" height="30" width="105">
<desc>image logo</desc>
</image>
</svg>