GWT: 解决Internet Explorer透明度问题

Question

本文仅涉及IE浏览器。以下代码的最后一行引起了问题。

    int width = 200;
    int height = 200;
    int overHeight = 40;

    AbsolutePanel absPanel = new AbsolutePanel();
    absPanel.setSize(width + "px", height + "px");      

    SimplePanel underPanel = new SimplePanel();
    underPanel.setWidth(width + "px");
    underPanel.setHeight(height + "px");
    underPanel.getElement().getStyle().setBackgroundColor("red");           

    SimplePanel overPanel = new SimplePanel();
    overPanel.setWidth(width + "px");
    overPanel.setHeight(overHeight + "px");
    overPanel.getElement().getStyle().setBackgroundColor("black");
    //Setting the IE opacity to 20% on the black element in order to obtain the see through effect.
    overPanel.getElement().getStyle().setProperty("filter", "alpha(opacity=20)"); 

    absPanel.add(underPanel, 0, 0);
    absPanel.add(overPanel, 0, 0);

    RootPanel.get("test").add(absPanel);

    //The next line causes the problem. 
    absPanel.getElement().getStyle().setProperty("filter", "alpha(opacity=100)");

所以基本上这段代码应该显示一个 200px x 200px 的红色正方形（请查看代码中的“underPanel”），在它的上面是一个 200px x 40px 的黑色矩形（请查看代码中的“overPanel”）。然而，黑色矩形部分透明，透明度设置为20％，因此它应该出现为红色，但比下面坐着的矩形要暗些，因为它实际上是一个褪色的黑色物品。

由于代码的最后一行设置了包含 AbsolutePanel 的不透明度为100％，因此会出现某些渲染问题（理论上不应影响视觉效果）。确实，在这种情况下，上方的面板仍然保持半透明，但直接穿过页面的背景颜色！就好像下面的面板根本不存在...

有什么想法吗？

这是在GWT 2.0和IE7下完成的。

- mks-d

Answer 1

为了完整起见... 最新的GWT 2.4有以下方法：

    Style.setOpacity()

这在所有当前的浏览器平台上得到了适当的翻译（包括ie6，ie7，ie8）。

- Draško Kokić

Answer 2

IE7的做法有些不同。请尝试以下方法：

absPanel.getElement().getStyle().setProperty("msFilter",   
"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)");

您可以在此处了解更多信息：

http://www.quirksmode.org/css/opacity.html

- chprpipr

Answer 3

你还可以包含Dean Edwards的IE9.js (http://code.google.com/p/ie7-js/)，它允许您在css类中使用不透明度属性（以及许多更酷的东西，例如使用伪选择器！）。我已经在几个基于GWT的项目中成功使用过它。此外，我会设置CSS类（setStyleName()）而不是设置UI元素的内联样式。

- tapmonkey