Question

我已经阅读了一段时间的灰度图像支持。我在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灰度支持？谢谢！

Answer 1

对于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>

Joomla支持IE 10的灰度图像

1 个答案: