css - css 属性 'filter: xray;' 的替代方案或解决方法

Question

我遇到过需要显示网页特定图像的 xray 的场景。

所以我使用的是 css 属性 filter: xray; , 它与 IE8 完美配合。但是对于像 Chrome、Firefox 甚至 IE11/Edge 这样的现代浏览器，它似乎不支持这个属性值。

我对此进行了深入研究，发现它最多支持 IE9。但是我在 Internet 上找不到任何地方像这个属性值对已弃用或过时。

我需要任何解决方案，以便我可以在网页上显示图像的 X 射线。对此的任何替代方案也是可以接受的。

下面是适用于 IE9 的示例代码 <img src="imagepath.jpg" width="200" height="200" style="filter: xray;" />

注意:如果直接从文件夹运行文件，上面的代码将不起作用，它应该需要http协议(protocol)才能体现效果。

Answer 1

可以通过使用标准 CSS 过滤器属性值的组合来实现相同的功能，如下所示:

IE8: 过滤器: xray;

现代浏览器(即 Chrome、Firefox): filter: invert(100%) grayscale(100%);

两者都产生相同的输出。