<分区>
我已经阅读了一段时间的灰度图像支持。我找到了在我的 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 灰度支持？ 谢谢!
最佳答案
对于 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>
关于css - Joomla 中支持 IE 10 的灰度图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27399980/