将对象/控件转为黑白

时间:2016-01-28 13:28:54

标签: javascript jquery html css internet-explorer-11

在IE8中有一个名为DX Filter的功能,它为您的网页提供各种多媒体风格的视觉效果。

他们中的大多数都可以很容易地被CSS取代,但还有一个会让我失望。这是XRay过滤器,使用以下语法:

<!-- This DIV is the target container for an image.  -->        
<DIV ID="oDiv" STYLE="position:absolute; left:270px; color:tan;" >
   An Image - >    
   <IMG SRC='/workshop/graphics/earglobe.gif' />
</DIV>
<BUTTON onclick=" oDiv.style.filter=
   'progid:DXImageTransform.Microsoft.BasicImage(XRay=1)'">
Show XRay</BUTTON><BR/>
<BUTTON onclick="oDiv.style.filter=''">Clear Filter</BUTTON><BR/>

它可以使任何控件/对象如:按钮,标题标题,图像......像X射线图像一样转动,例如:

<html>
   <head></head>
   <body>
      <button type="button">I'm normal</button>
      <button type="button" style="background-color:black;color:white">I turned x-ray</button>
      <br />
   </body>
</html>

但是从IE-10开始,此功能不再可用。

我们如何使用CSS和Javascript在IE-11中实现此效果?

2 个答案:

答案 0 :(得分:0)

IE 11不支持反转滤波器。我相信您可以使用SVG滤波器,因为IE10 +支持。但是,IE8不支持SVG,因此如果您尝试支持旧版本的IE,则可能需要在条件注释(或其他替代方法)中单独标记。

答案 1 :(得分:0)

您可以使用filter属性在标准CSS中执行此类操作。但是,这在IE11中不受支持! (它只在Edge中,在旗帜后面)我认为你能做到的唯一方法是将图像绘制到画布元素并自己调整颜色。