GWT：Internet Explorer 透明度问题

发布于 2024-08-29 18:56:47 字数 1412 浏览 3 评论 0原文

这篇文章仅涉及 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 下。

原文

This post concerns only IE.
The last line of the following code is causing the issue.

    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)");

So basically this code should display a red square of 200px by 200px (see underPanel in the code) and on top of it a black rectangle of 200px by 40px (see overPanel in the code). However the black rectangle is partially see through since its transparency is set to 20%, therefore it should appear in red, but of a darker red than the rectangle sitting under since it is actually a faded black item.

Some rendering problem occurs because of the last line of code that sets the opacity of the containing AbsolutePanel to 100% (which in theory should not affect the visual result). Indeed in that case the panel lying over remains still see through but straight through the background colour of the page! It's like if the panel sitting under was not there at all...

Any ideas?

This is under GWT 2.0 and IE7.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

待天淡蓝洁白时 2024-09-05 18:56:47

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

    Style.setOpacity()

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

Just for the sake of completeness ... the latest GWT 2.4 has the method:

    Style.setOpacity()

which is properly being translated on all current browser platforms (including ie6, ie7, ie8)

回复收藏 0 原文

硬不硬你别怂 2024-09-05 18:56:47

IE7 的做法略有不同。试试这个：

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

您可以在这里阅读更多相关信息：

http://www.quirksmode.org/css/不透明度.html

IE7 does things a little differently. Try this:

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

You can read more about it here:

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

回复收藏 0 原文

‘画卷フ 2024-09-05 18:56:47

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

回复收藏 0 原文

~没有更多了~