GWT：Internet Explorer 透明度问题答案

【问题标题】：GWT : Internet Explorer transparency issueGWT：Internet Explorer 透明度问题
【发布时间】：2010-04-20 22:53:02
【问题描述】：

这篇文章只涉及 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)");

所以基本上这段代码应该显示一个 200 像素 x 200 像素的红色正方形（参见代码中的 underPanel），并在其顶部显示一个 200 像素 x 40 像素的黑色矩形（参见代码中的 overPanel）。然而，黑色矩形是部分透明的，因为它的透明度设置为 20%，因此它应该显示为红色，但比位于下方的矩形更深，因为它实际上是一个褪色的黑色项目。

由于最后一行代码将包含的 AbsolutePanel 的不透明度设置为 100%（理论上这不会影响视觉结果），因此会出现一些渲染问题。事实上，在这种情况下，面板仍然可以看穿，但可以直接看穿页面的背景颜色！就好像坐在下面的面板根本不在那里......

有什么想法吗？

这是在 GWT 2.0 和 IE7 下。

【问题讨论】：

标签： css internet-explorer gwt transparency

【解决方案1】：

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

    Style.setOpacity()

在所有当前浏览器平台（包括 ie6、ie7、ie8）上都被正确翻译

【讨论】：

【解决方案2】：

IE7 的处理方式略有不同。试试这个：

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

【讨论】：

【解决方案3】：

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

【讨论】：